ホームページ  >  記事  >  ウェブフロントエンド  >  Vue が次のテーブルを使用して配列を変更するときにページがレンダリングされない場合の対処方法

Vue が次のテーブルを使用して配列を変更するときにページがレンダリングされない場合の対処方法

php中世界最好的语言
php中世界最好的语言オリジナル
2018-03-28 17:30:431907ブラウズ

今回は、Vue が以下のテーブルを使用して配列を変更したときにページがレンダリングされない問題を解決するための注意事項を説明します。ここで実際のケースを見てみましょう。

Vue が Modelstate の変更を監視できる理由は、JavaScript 言語自体が、object の変更を監視するための Proxy または Object.observe() メカニズムを提供しているためであることに注意してください。州。ただし、配列要素の割り当てを直接監視する方法はありません。そのため、配列要素に値を直接割り当てると、

vm.todos[0] = {
  name: 'New name',
  description: 'New description'
};

によって Vue がビューを更新できなくなります。

正しい方法は、配列要素に値を割り当てるのではなく、更新することです:

vm.todos[0].name = 'New name';
vm.todos[0].description = 'New description';

または、 splice() メソッドを使用して、要素を 削除してから、別の要素を追加して効果を実現します"assignment" :

var index = 0;
var newElement = {...};
vm.todos.splice(index, 1, newElement);

Vue は配列の splice、push、unshift などのメソッド呼び出しを監視できるため、上記のコードは View を正しく更新できます。

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

推奨書籍:

vue で xe-utils を使用する方法

vue-router のビルド時にルーティング ページが表示されない場合の対処方法

以上がVue が次のテーブルを使用して配列を変更するときにページがレンダリングされない場合の対処方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。