Question

组件<tr>所显示的行显示在封装该组件的表之外。我阅读了说明使用is=comp的文档。我尝试在所有<tr>标签中使用它，但是没有用。有什么方法可以显示表中组件的行？

HTML：

<table>
    <tr >
        <th>Date</th>
    </tr>
   <comp  v-for = "post in all_trans"  v-bind:ip1="post"></comp>
</table>

JS：

Vue.component('comp', {
      data: function () {
                return {
                  boolean1: false
                }
            },
        props:['ip1'],
            template: `
                      <tr >
                          <td>{{ip1.created_at}} </td>
                    </tr>
                      `
           })

谢谢

Answer 1

根据文档：https://vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats

某些HTML元素（例如ul，ol，table和select）对哪些元素可以出现在其中进行了限制，而某些元素（例如li，tr和option）只能出现在某些其他元素中。

要解决此问题，您需要使用<tr is="comp"></tr>而不是<comp></comp>

表格中显示了Vue组件

1 个答案: