Question

当我尝试在内部嵌套一个带有v-for绑定的内部时，vue抱怨属性未定义。有什么问题吗？

<table>
  <thead></thead>
  <tbody>
    <tr v-for="item in items">
      <td>{{ item.name }}</td>
      <tr v-for="child in item.children">
        <td>{{ child.name }}</td>
      </tr>
    </tr>
  </tbody>
</table>

这是一个js小提琴：https://jsfiddle.net/78s3qnz5/

Answer 1

问题是由于<tr>标记嵌套在另一个<tr>标记内，这导致无效标记，而Vue无法呈现标记。确实。错误消息尚不清楚。

解决方案是通过将嵌套的<tr>替换为<td>来修复呈现的标记。

工作示例：

JSFiddle

Answer 2

如果要使用行，也可以使用模板标签。

<table>
  <thead></thead>
  <tbody>
    <template v-for="item in items">
      <tr>
        <td>{{ item.name }}</td>
      </tr>
      <tr v-for="child in item.children">
        <td>{{ child.name }}</td>
      </tr>
    </template>
  </tbody>
</table>

Vue.js嵌套v-for和标签问题

2 个答案: