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