Warum kann Vue die Variable in der Schleife nicht finden?

Question

Ich versuche eine einfache Komponente zu entwickeln und sie in einer Schleife zu verwenden:

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

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

Das funktioniert offensichtlich noch nicht, ist aber gescheitert:

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

gegeben ReferenceError：在视图中找不到变量：m. Aus einem seltsamen Grund funktioniert das Gleiche auch in Absätzen, d. h. es gibt keine Fehler:

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

Was führt dazu, dass die Variable nicht gefunden wird?

PS: Hier ist eine Geige: https://jsfiddle.net/andig2/u47gh3w1/. Sobald table enthalten ist, wird ein anderer Fehler angezeigt.

Update Der Zweck der Schleife besteht darin, mehrere Tabellen zu generieren. Die Anzahl der Zeilen für jede Tabelle wird durch ein Vielfaches von measurement

erstellt

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