添加 <tr><td> 标签在使用 vue.js 时出现问题

Question

我有一个表，当我创建数据时它会更新

我想用 Vue.js 来做

所以我去看看Vue.js Components 并尝试

<div id="app1">
<table class="table table-bordered">
    <tr>
        <td class="active">name</td>
        <td class="active">pirce</td>
    </tr>
    <my-trtd></my-trtd>        
</table>

JS

Vue.component('my-trtd', {
                        template: '<tr><td>' + 1 + '</td>' +
                                      '<td>' + 2 + '</td></tr>'
                    })
                    new Vue({
                        el: '#app1'
                    })

结果

<div id="app1">
<tr>
    <td>1</td>
    <td>2</td>
</tr>
<table class="table table-bordered">
    <tbody>
        <tr>
            ..
        </tr>
    </tbody>
</table>

它可以工作。然而，不是我想要的

这是我消耗的结果

<div id="app1">
<table class="table table-bordered">
    <tbody>
        <tr>
            <td class="active">name</td> 
            <td class="active">pirce</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </tbody>
</table>

如何解决？

Answer 1

试试这个，就像在这个answer中使用的那样：

<div id="app1">
  <table class="table table-bordered">
      <tr>
          <td class="active">name</td>
          <td class="active">pirce</td>
      </tr>
      <template>
         <my-trtd></my-trtd>        
      </template>
  </table>
</div