Vue.js如何正确使用两层v-for循环？第二层循环不生效如何解决

问题原因&修复方案 #

你存在2个明显的语法错误，直接导致第二层循环解析失效：

• 第一层<b-tbody>标签的:key属性缺少闭合双引号，你写的是:key="index>，模板解析到这里会直接异常，后续嵌套内容无法正常识别
• 两层循环复用了同一个index变量名，作用域冲突会导致索引取值异常，建议区分命名

另外如果你第二层要遍历的是外层循环每个item下的子列表，而非全局的list2，需要把遍历源改成item.list2而非直接写list2。

修复后代码示例 #

<b-tbody v-for="(item, outerIndex) in list" :key="outerIndex">
  <b-tr>
    <b-td></b-td>
  </b-tr>
  <!-- 如果是全局list2就保留list2，是item下的子列表就改成item.list2 -->
  <b-tr v-for="(item2, innerIndex) in list2" :key="innerIndex">
    <b-td></b-td>
  </b-tr>
</b-tbody>

内容的提问来源于stack exchange，提问作者gazarii