Vue がループ内で変数を見つけられないのはなぜですか?

Question

単純なコンポーネントを開発してループ内で使用しようとしています:

リーリー リーリー

これは明らかにまだ機能しませんが、失敗しました:

リーリー

は ReferenceError: ビューに変数が見つかりません: m を返します。奇妙な理由で、同じことが段落内で機能します。つまり、エラーはありません:

リーリー

変数が見つからない原因は何ですか?

PS: これはフィドルです: https://jsfiddle.net/andig2/u47gh3w1/。 table が含まれると、別のエラーが表示されます。

Update ループの目的は、複数のテーブルを生成することです。各テーブルの行数は、複数の 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">コンテンツ モデル< tr> は:

• <script> または
を組み合わせたもの

互換性のあるブラウザ DOM パーサーは、許可されていない要素 (<measurement> など) をテーブルから自動的に除外します。これはスクリプトの段階の前 (Vue がそれを認識する前) に発生します。

たとえば、次のタグ:

リーリー

...DOM 解析後 (スクリプト作成前) は次のようになります:

リーリー

i と m が v-for ループのコンテキスト外にあることに注意してください。これにより、i と m に関する懸念が生じます。 m は、未定義の Vue ランタイム エラーです (コンポーネントでたまたま宣言されている場合を除く)。 m の目的は、<measurement> の data プロパティにバインドすることですが、障害のため、data は単なるそのプロパティです。初期値 (unknown) のため、{{data.value}}

のレンダリングが失敗します。 cphpcn レンダリング エラー: 「TypeError: 未定義のプロパティ '値' を読み取れません」

。

これらのランタイム エラーや Vue を使用せずにブーストをデモするには、次のコード スニペットを実行します。

### リーリー