為什麼 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>