Pourquoi Vue ne trouve-t-il pas la variable dans la boucle ?

Question

J'essaie de développer un composant simple et de l'utiliser en boucle :

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

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

Cela ne fonctionne évidemment pas encore, mais cela a échoué :

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

donné ReferenceError：在视图中找不到变量：m. Pour une raison étrange, la même chose fonctionne dans les paragraphes, c'est-à-dire qu'il n'y a pas d'erreur :

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

Qu'est-ce qui fait que la variable n'est pas trouvée ?

PS : Voici un violon : https://jsfiddle.net/andig2/u47gh3w1/. Une erreur différente s'affichera une fois que table sera inclus.

Mise à jour Le but de la boucle est de générer plusieurs tables. Le nombre de lignes pour chaque tableau sera créé par plusieurs measurement

Answer 1

Si remplacé

et

Vous obtiendrez un code fonctionnel.

Mais vous souhaiterez probablement utiliser

ou

Answer 2

TLDR : Avant que Vue ne transmette le modèle DOM, le navigateur met <measurement v-bind:name="i" v-bind:data="m"> 提升到 之外<table>（在 v-for hors contexte), provoquant une erreur dans Vue. Il s'agit d'un avertissement connu concernant l'analyse du modèle DOM.

---

La spécification HTML exige <table> qu'elle contienne uniquement certains éléments enfants  :

• <script> 或