vueがインデックス値を介して配列内の要素を変更し、ページが変更されないという問題を解決します

根本原因:インデックス値を渡すことができません!

簡潔にするために、vueはインデックス値を介して配列を変更するために内部的に監視しません。データは変更されますが、ビューレイヤーは変更されません。つまり、データのデータが配列またはオブジェクトの場合、は動的に追加または削除され、ビューは更新されません。

解決策1:解決策1:

挿入または削除の場合は、配列のスプライスメソッドを使用できます

this.letters[0]='b'
//替换成
this.letters.splice(0,1,'b')

解決策2:解決策2:

挿入または削除は、Vueのsetメソッドを使用することもできます

基本的に: setメソッドを使用した、Vue配列のスプライスが実際に呼び出されるため、レンダリングがトリガーされます。(このために、あなたはvueソースコードを見ることができます)

this.letters[0]='b'
//替换成

import Vue from 'vue'
Vue.set(this.letters,0,'b')

Vue.set (要修改的数组/对象,索引值/属性,修改后的值)


//如果不想引入import Vue,也可以用this.$set
this.$set(this.letters,0,'b')

 2つのメソッドvue.setとthis。$ set()は実際には同じです。セットがVueコンストラクターにバインドされており、導入する必要があることを除いて、ほぼ同じであると言えます。$ set()はバインドされています。 toVueプロトタイプを導入する必要はありません。

 

おすすめ

転載: blog.csdn.net/a1059526327/article/details/108974021