Vue.js での v-for 実行エラーの問題を解決する方法

Vue.js で v-for の実行エラーを解決する方法: 1. Vue フレームワーク コードを変更する; 2. 空のデータを持つ要素に対して dom ノードを生成しないように強制する; 3. 各オブジェクトには一意の ID 属性があるでは、[track-by] 機能を使用して Vue にヒントを与えることができます。

#このチュートリアルの動作環境: Windows10 システム、vue2.9、この記事はすべてのブランドのコンピューターに適用されます。

【おすすめ関連記事:

vue.js】

Vue.js での v-for 実行エラーを解決する方法:

▲オプション 1

エラー メッセージから

Uncaught TypeError: Cannot read property 'removeChild' of nullこの問題が発生する理由は、オブジェクトがnull の場合は、removeChild が実行されます。

Vue フレームワーク コードを変更します。ここのコードを

から

▲ に変更します。オプション 2

el.parentNode が null になる理由の詳細な分析。上記で再現した手順を通じて、that.model.test_arr = ["", "4 ","","5","6",""]このコード設定が行われると、v-for によって生成される DOM ノードは 5 ではなく 3 になります。この場合、el.parentNode は次のようになります。これは存在しないため、空のデータを持つ要素に対して dom ノードを強制的に生成しないという 2 番目の解決策が開発されました。

▲オプション 3

問題は満足のいく解決策ではありません。通常の状況では、フレームワークは堅牢であり、さまざまな使用シナリオに適応する必要があります。 js のエラー報告には問題があるため、詳しく調べる必要があります。

Vue の v-for 命令には、オプションのトラックバイ構成があります。

▪トラックバイ状況がない: データが変更されると、値が変更されるかどうかに関係なく、 dom は再レンダリングされます。

▪トラックバイの状況があります。データが変更されると、変更されていないデータが配置されている DOM は再レンダリングされず、変更されたデータが配置されている DOM が再レンダリングされます。

v-for はデータ オブジェクトの特性を使用して、デフォルトで既存のスコープと DOM 要素の再利用の程度を決定するため、リスト全体が再レンダリングされる可能性があります。ただし、各オブジェクトに一意の ID プロパティがある場合は、track-by 属性を使用して Vue にヒントを与えることができるため、Vue は既存のインスタンスを可能な限り再利用できます。そこで、3 番目の解決策があります。

関連する無料学習の推奨事項: JavaScript(ビデオ)

以上がVue.js での v-for 実行エラーの問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。