首页 > 解决方案 > Vuejs 嵌套 v-for 和标签问题

问题描述

当我尝试将 a 嵌套在 a 中并在每个 a 上绑定 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/

标签: htmlvue.jshtml-tablebindingv-for

解决方案


如果您想使用行,也可以使用模板标签。

<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>

推荐阅读