Mengapa Vue tidak dapat mencari pembolehubah dalam gelung?

Question

Saya cuba membangunkan komponen mudah dan menggunakannya dalam gelung:

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

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

Ini jelas belum berfungsi, tetapi ia telah gagal:

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

diberikan ReferenceError：在视图中找不到变量：m. Atas sebab yang aneh perkara yang sama berfungsi dalam perenggan, iaitu tiada ralat:

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

Apakah yang menyebabkan pembolehubah tidak ditemui?

PS: Ini adalah biola: https://jsfiddle.net/andig2/u47gh3w1/. Ralat berbeza akan dipaparkan sebaik sahaja table disertakan.

Kemas kini Tujuan gelung adalah untuk menjana berbilang jadual. Bilangan baris untuk setiap jadual akan dibuat oleh berbilang measurement

Answer 1

Jika diganti

dan

Anda akan mendapat kod yang berfungsi.

Tetapi kemungkinan besar anda mahu menggunakan

atau

Answer 2

TLDR: Sebelum Vue melepasi templat DOM, penyemak imbas meletakkan <measurement v-bind:name="i" v-bind:data="m"> 提升到 之外<table>（在 v-for di luar konteks), menyebabkan ralat dalam Vue. Ini adalah amaran yang diketahui tentang penghuraian templat DOM.

---

Spesifikasi HTML memerlukan <table> mengandungi elemen kanak-kanak tertentu sahaja :

• <script> 或

Begitu juga, 的<a href="https://html.spec.whatwg.org/multipage/tables.html#the-tr-element" rel="nofollow noreferrer">内容模型<tr> ialah:

• <script> 或

Penghurai DOM yang serasi dengan penyemak imbas akan secara automatik mengeluarkan unsur yang tidak dibenarkan (seperti <measurement>) daripada jadual. Ini berlaku sebelum peringkat skrip (sebelum Vue melihatnya).

Sebagai contoh, tag ini:

...selepas penghuraian DOM (sebelum sebarang skrip) menjadi ini:

Perhatikan bagaimana i dan m berada di luar konteks gelung v-for, yang membawa kepada kebimbangan tentang i code> dan m ialah ralat masa jalan Vue yang tidak ditentukan (melainkan komponen anda telah mengisytiharkannya). Tujuan m adalah untuk mengikat kepada sifat data i 和 m 是如何位于 v-for 循环的上下文之外的，这会导致有关 i 和 m 未定义的 Vue 运行时错误（除非您的组件碰巧已经声明了它们）。 m 的目的是绑定到 <measurement> 的 data 属性，但由于失败，data 只是其初始值（也是 undefined），导致 {{data.value}} 的渲染失败。 cphpcn渲染错误：“类型错误：无法读取未定义的属性‘值’”, tetapi kerana ia gagal, data hanyalah nilai awalnya (yang juga undefined code>), menyebabkan pemaparan {{data.value}} gagal. cphpcn rendering error: "TypeError: Cannot read property 'value' of undefined".

Untuk menunjukkan peningkatan tanpa ralat masa jalan ini dan tanpa Vue, jalankan coretan kod berikut:

1. hoisted outside

2. also hoisted outside

3. inside table