vue.js_vue.js の $set および array update メソッド

ここで、vue.js の $set メソッドと配列更新メソッドに関する記事を共有します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。

JavaScript の制限により、Vue は次の変更された配列を検出できません:

インデックスを使用して配列の項目を直接設定する場合、たとえば: vm.items[indexOfItem] = newValue

変更する場合配列の長さ (例: vm.items.length = newLength)、配列は更新されません。

もちろん、vue には解決策があります。それは、Vue.set、vm.$set (Vue.set のバリアント) または splice、caoncat などを使用して配列を変更することであり、これによりステータスもトリガーされます。 update:

ex:

そのため、インスタンスの作成後に新しいプロパティがインスタンスに追加された場合、更新はトリガーされません。

追記: 今、arr1 と arr2 の 2 つの配列があります。arr1 が添字割り当てで配列を変更し、arr2 が $set で配列を変更すると、結果はどうなりますか?

data:{
 arr1 = ['a','b','c'];
 arr2 = [‘foo','bar','baz'];  
}

vm.arr1[1] = 'alpha';
vm.$set(vm.arr2, 1, 'alpha');

添え字インデックスに基づいて配列を変更することはステータス更新をトリガーできないと最初に述べたことに基づいて、最初の配列の 2 番目の変更はページ上で更新されず、ページ上の変更のみが更新されることがわかります。 2 番目の配列はページ上で更新されます。ただし、結果は次のようになります。

arr1 = ['a', 'alpha', 'b', 'c'];
arr2 = [‘foo', 'alpha', 'bar','baz'];

両方の配列の値が更新されます。つまり、$set() メソッドを使用して arr2 が更新されると、ページが完全に更新されます。

上記は私があなたのためにまとめたものです。

関連記事:

selectコンポーネントのJQuery選択値メソッド

react-router4でのコード分割の方法(webpackベース)

vue.jsは配列の位置を移動し、同時にビューを更新時間メソッド

以上がvue.js_vue.js の $set および array update メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。