如何在不破坏html代码的情况下在vuejs模板中循环[重复]答案

【问题标题】：How to loop inside vuejs template without breaking html code [duplicate]如何在不破坏html代码的情况下在vuejs模板中循环[重复]
【发布时间】：2021-04-08 05:10:51
【问题描述】：

所以我试图在表格内循环。我遇到的一个问题是

<tr v-for="( block , index ) in listRenderBlock" :key="index">
    <div v-for="( section , i ) in block.sections" :key=" i ">
        <td> 
           <p>
              {{ block.name }}
           </p>
        </td>
        <td>
           <p>
              {{ section.name }}
           </p>
        </td>
    </div>
</tr>

因此，如果我尝试像这样循环，则 div 将破坏表格的代码。我知道如果在反应中我可以做某事

blocks.sections.map(value => ....)

但这似乎在 vuejs 中也不起作用。有什么建议吗？感谢所有cmets，感谢阅读

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

如果您想在不使用包装器的情况下进行循环，请使用 <template>:

<tr v-for="( block , index ) in listRenderBlock" :key="index">
  <template v-for="(section , i ) in block.sections">
    <td :key="`b_${index}_${i}`"> 
      <p>
        {{ block.name }}
      </p>
    </td>
    <td :key="`s_${index}_${i}`">
      <p>
        {{ section.name }}
      </p>
    </td>
  </template>
</tr>

注意：<div> 是 <tr> 的无效子代。

看看它的工作原理：

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#app',
  data: () => ({
    listRenderBlock: [{
      name: 'B-1',
      sections: [
        { name: 'S-1' },
        { name: 'S-2' }
      ]
    }, {
      name: 'B-2',
      sections: [
        { name: 'S-1' },
        { name: 'S-2' }
      ]
    }]
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<table id="app">
  <tr v-for="(block, index) in listRenderBlock" :key="index">
    <template v-for="(section, i) in block.sections">
      <td :key="`b_${index}_${i}`"> 
         <p v-text="block.name" />
      </td>
      <td :key="`s_${index}_${i}`">
         <p v-text="section.name" />
      </td>
    </template>
  </tr>
</table>

另一个注意事项：<template> 不能是 :key-ed，因为它们最终不会成为 DOM 元素。所以你必须想出你自己的:key-ing 系统，应用于实际的DOM 元素。在您的情况下，我用index + i 制作了密钥，前缀为b 用于块<td> 或s 用于<td> 部分。键的外观并不重要，只要它们是独一无二的。（它们不会显示在任何地方，它们只是被 Vue 用来在您的模型/数据更改时更新 DOM 元素）。

【讨论】：