Vue中如何不生成额外外层元素实现嵌套v-for渲染表格td

解决方案 #

使用Vue内置的<template>标签承载外层v-for即可，<template>属于逻辑占位标签，最终渲染时不会生成任何真实DOM节点，不会破坏表格的结构规范。

正确的代码写法如下：

<tr>
  <!-- 外层循环用template包裹，不会生成额外元素 -->
  <template v-for="(a_element, i) in a" :key="i">
    <td v-for="(b_element, j) in b" :key="`${i}-${j}`">
      <input :name="`c[${i}][${j}]`" v-model="c[i][j]" :value="`${a_element}${b_element}`">
    </td>
  </template>
</tr>

补充说明 #

• 动态绑定的属性（name、value、v-model等）前面需要加:前缀，你之前的写法没有加冒号属于语法错误，会导致属性值被解析为静态字符串
• 建议给内层td的key加上外层索引i作为前缀，避免不同组的j重复导致key冲突

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