vue.js で $set 配列を更新する方法

php中世界最好的语言
リリース: 2018-03-28 14:54:21
オリジナル
3177 人が閲覧しました

今回は、vue.js で $set を使用して配列を更新する方法を説明します。vue.js で $set を配列に更新する場合の 注意事項 について説明します。実際のケースを見てみましょう。 。

JavaScript

の制限により、Vueは次の変更された配列を検出できません: indexを使用して配列の項目を直接設定する場合、例: vm.items[indexOfItem] = newValue

場合 配列の長さを変更する場合 (例: vm.items.length = newLength)、配列は更新されません。 もちろん、vue には解決策があります。それは、Vue.set、vm.$set (Vue.set のバリアント) または splice、caoncat などを使用して配列を変更することです。これにより、

もトリガーされます。 status

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 が更新されると、ページが完全に更新されます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vue.js 配列の位置を移動してビューを更新する方法

Vue での vue2-highcharts の使用についての詳細な図による説明

以上がvue.js で $set 配列を更新する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!