Vue.js 在Vue模板中呈现表

我正在尝试从具有标题和正文数据的对象渲染表：

const mydata = {header: {}, body: {}}

这将产生两个

元素：

<template>
  <div class="container" id="ProbabilityTable">
    <div id="v-for-object">
      <table>
        <div v-for="(data, key) in table(html)">

          <thead v-if="key === 'header'">
            // render table header
          </thead>

          <tbody v-if="key === 'body'">          
            // render table body
          </tbody>

        </div>
      </table>
    </div>
  </div>
</template>

//渲染表标题
//渲染表体

是这样的：

<template>
  <div class="container" id="ProbabilityTable">
    <div id="v-for-object">
      <table>
        <div v-for="(data, key) in table(html)">

          <thead v-if="key === 'header'">
            // render table header
          </thead>
          <tbody v-if="key === 'body'">          
            // render body header
          </tbody>

        </div>
      </table>
    </div>
  </div>
</template>

//渲染表标题
//渲染体标题

产生一个表，因为HTML表中间不应该有div。

---

有什么办法可以解决这个问题吗？

您发布的两个代码片段的解释是相同的。他们都错了

如本文所述，div不是表的有效内容。正因为如此，每个浏览器对错误的解释都会有所不同

解决方案：使用有效的HTML语法，查看问题是否仍然存在。

您可以使用标签

标记不会将自身呈现为元素，但可以将其用于vue中的条件和循环

<template>
<div class="container" id="ProbabilityTable">
   <div id="v-for-object">
     <table>
      <template v-for="(data, key) in table(html)">
        <thead v-if="key === 'header'">
        // render table header
        </thead>
        <tbody v-if="key === 'body'">          
        // render body header
        </tbody>
      </template>
      </table>
      </div>
    </div>
</template>

//渲染表标题
//渲染体标题

在页眉和正文之间分别做一个for循环，这样就不需要额外的div或模板

<table>
  <thead>
    <tr v-for="(row, headerKey) in table(html).header" :key="headerKey">
      <td>{{ row }}</td>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(row, bodyKey) in table(html).body" :key="bodyKey">
      <td>{{ row }}</td>
    </tr>
  </tbody>
</table>

{{row}}
{{row}}

正如我所说，我知道表中的div是错误的，但是如何使用正确的语法使模板工作？“使用有效的HTML语法”时必须有一些解决方法，对于嵌套循环，也可以使用template元素。不幸的是，我在一个表中最多只能有3个带template元素的嵌套循环，而在无序列表中，我可以循环3次以上。知道为什么吗？裁判：