為什麼 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">內容模型&lt ;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