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

De même, 的<a href="https://html.spec.whatwg.org/multipage/tables.html#the-tr-element" rel="nofollow noreferrer">内容模型<tr> est :

• <script> 或

Les analyseurs DOM compatibles avec les navigateurs supprimeront automatiquement les éléments non autorisés (tels que <measurement>) du tableau. Cela se produit avant l'étape du script (avant même que Vue ne le voie).

Par exemple, cette balise :

...après l'analyse DOM (avant tout script), cela devient ceci :

Notez comment i et m sont en dehors du contexte de la boucle v-for, ce qui suscite des inquiétudes concernant i code> et m sont des erreurs d'exécution Vue non définies (sauf si votre composant les a déclarées). Le but de m est de se lier à la propriété data de i 和 m 是如何位于 v-for 循环的上下文之外的，这会导致有关 i 和 m 未定义的 Vue 运行时错误（除非您的组件碰巧已经声明了它们）。 m 的目的是绑定到 <measurement> 的 data 属性，但由于失败，data 只是其初始值（也是 undefined），导致 {{data.value}} 的渲染失败。 cphpcn渲染错误：“类型错误：无法读取未定义的属性‘值’”, mais comme cela échoue, data n'est que sa valeur initiale (qui est également undefined code>), provoquant l'échec du rendu de {{data.value}}. Erreur de rendu cphpcn : "TypeError : Impossible de lire la propriété 'valeur' ​​non définie".

Pour démontrer le boosting sans ces erreurs d'exécution et sans Vue, exécutez l'extrait de code suivant :

1. hoisted outside

2. also hoisted outside

3. inside table