Question

我有一个Vue（v2.5.16）组件，它在模板中使用<tbody>和重复的<tr>元素。组件数据最初是空的，当我添加数据时，Vue将<tbody>和表行放在表的上方和外部，就在#clines div之后。为什么？

这是有问题的html。该组件是现有<tbody>标记下的srvaudit-table-rows。组件模板使用额外的<tbody>作为其父元素。根据{{3}}，<tbody>允许多个<table>元素。

<div id="app" class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <div id="clines" class="table-responsive ctable">
                <table class="table table-sm nowrapp">
                    <thead>
                        <tr>
                            <th>Command</th>
                            <th>Directory</th>
                            <th>Return</th>
                            <th>Pipes</th>
                            <th>When</th>
                            <th>Duration</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>time date</td>
                            <td>/root</td>
                            <td>42</td>
                            <td>2</td>
                            <td>Feb 2</td>
                            <td>44s</td>
                        </tr>
                    </tbody>
                    <srvaudit-command-list></srvaudit-command-list>  // Desired placement of component template and data.
                </table>
            </div>
        </div>
    </div>
</div>

以下是组件。

Vue.component('srvaudit-command-list', {
    template: `
        <tbody>
            <tr v-for="(command, index) in commands" :key="index">
                <td>{{ command.cmd }}</td>
                <td>{{ command.cwd }}</td>
                <td>{{ command.rval }}</td>
                <td>{{ command.pipes }}</td>
                <td>{{ command.begin }}</td>
                <td>{{ command.duration }}</td>
            </tr>
        </tbody>
    `,
    props: ['command'],
    data() {
        return {
            commands: []
        };
    },
    mounted: function() {
        Echo.private(`session.${sid}.commands`)
            .listen('CommandReceived', (data) => {
                this.commands.push(data.command);  // Here is where it renders the component after pushing some data.
            });
    },
});

这是在将新的command推送到commands数据后呈现html的方式。

<div id="app" class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <div id="clines" class="table-responsive ctable">
                <tbody>                       // incorrect placement
                    <tr>                      // incorrect placement
                        <td>time date</td>    // incorrect placement
                        <td>/root</td>        // incorrect placement
                        <td>42</td>           // incorrect placement
                        <td>2</td>            // incorrect placement
                        <td>Feb 2</td>        // incorrect placement
                        <td>44s</td>          // incorrect placement
                    </tr>                     // incorrect placement
                </tbody>                      // incorrect placement
                <table class="table table-sm nowrapp">
                    <thead>
                        <tr>
                            <th>Command</th>
                            <th>Directory</th>
                            <th>Return</th>
                            <th>Pipes</th>
                            <th>When</th>
                            <th>Duration</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>time date</td>
                            <td>/root</td>
                            <td>42</td>
                            <td>2</td>
                            <td>Feb 2</td>
                            <td>44s</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

非常感谢任何帮助！我已经在这几天挣扎了几天，并且在SO和Vue文档中找到了我能找到的每一种方式。

Answer 1

只有当vue获得任何tag时才能进行插值或组件替换，因为除了table，tbody，{{1 }}，thead，tr。您可以通过在表标记内放置任何标记进行交叉检查，而不使用vue，它将自动从表标记中删除并放在表标记之外，如果没有td标记table则不会显示任何内容。< / p>

您可以查看other discussion regarding this和one more

以下是通过vue.js在tbody标记内插入tbody的解决方案，其中包含另一个组件table

＆＃13;

base-table

＆＃13;

Vue.component('base-table',{
	template:`<div>
  	<table class="table table-sm nowrapp">
                    <thead>
                        <tr>
                            <th>Command</th>
                            <th>Directory</th>
                            <th>Return</th>
                            <th>Pipes</th>
                            <th>When</th>
                            <th>Duration</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>time date</td>
                            <td>/root</td>
                            <td>42</td>
                            <td>2</td>
                            <td>Feb 2</td>
                            <td>44s</td>
                        </tr>
                    </tbody>
                    <srvaudit></srvaudit>
                </table>
                </div>
  `
});

Vue.component('srvaudit', {
    template: `
          <tbody>
                        <tr>
                            <td>time date</td>
                            <td>/root2</td>
                            <td>99</td>
                            <td>8</td>
                            <td>Feb 5</td>
                            <td>55s</td>
                        </tr>
                        <tr>
                            <td>time date</td>
                            <td>/root4</td>
                            <td>101</td>
                            <td>10</td>
                            <td>Feb 25</td>
                            <td>88s</td>
                        </tr>
                    </tbody>
    `,
    props: ['command'],
    data() {
        return {
            commands: []
        };
    },
    mounted: function() {
    },
});
new Vue({
  el: '#app'
})

＆＃13;

JSFiddle for the same

如何使用Vue.js组件添加标记的子元素

1 个答案: