为什么 Vue 在循环中找不到变量？

Question

我正在努力开发一个简单的组件并在循环中使用它：

<template id="measurement">
    <tr class="d-flex">
    </tr>
</template>

Vue.component('measurement', {
    template: '#measurement',
    props: {
        name: String,
        data: Object,
        val: String,
    },
});

这显然还不能正常工作，但已经失败了：

<table v-for="(m, idx) in sortedMeters">
    <measurement v-bind:data="m"></measurement>
</table>

给出 ReferenceError：在视图中找不到变量：m。由于一个奇怪的原因，同样的事情在段落中起作用，即没有错误：

<p v-for="(m, idx) in sortedMeters">
    <measurement v-bind:data="m"></measurement>
</p>

什么原因导致变量找不到？

PS：这是一个小提琴：https://jsfiddle.net/andig2/u47gh3w1/。一旦包含 table 就会显示不同的错误。

更新 循环的目的是生成多个表。每个表的行数将由多个 measurement 创建

Answer 1

如果更换

与

您最终将得到工作代码。

但是您很可能想使用

或

Answer 2

TLDR： 在 Vue 传递 DOM 模板之前，浏览器会将 <measurement v-bind:name="i" v-bind:data="m"> 提升到 之外<table>（在 v-for 上下文之外），导致 Vue 中出现错误。这是 DOM 模板解析的已知警告.

---

HTML 规范要求 <table> 包含仅特定子元素：

• <script> 或