为什么 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> 或

同样，的<a href="https://html.spec.whatwg.org/multipage/tables.html#the-tr-element" rel="nofollow noreferrer">内容模型<tr> 是：

• <script> 或

兼容浏览器的 DOM 解析器会自动将不允许的元素（例如 <measurement>）提升到表之外。这发生在脚本阶段之前（甚至在 Vue 看到它之前）。

例如，这个标记：

...在 DOM 解析之后（在任何脚本编写之前）变成这样：

请注意 i 和 m 是如何位于 v-for 循环的上下文之外的，这会导致有关 i 和 m 未定义的 Vue 运行时错误（除非您的组件碰巧已经声明了它们）。 m 的目的是绑定到 <measurement> 的 data 属性，但由于失败，data 只是其初始值（也是 undefined），导致 {{data.value}} 的渲染失败。 cphpcn渲染错误：“类型错误：无法读取未定义的属性‘值’”。

要演示没有这些运行时错误且没有 Vue 的提升，请运行下面的代码片段：

1. hoisted outside

2. also hoisted outside

3. inside table