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> 或