vueでのデータの変更、ビューの更新を強制し、ビューが更新されない理由と解決方法
645 ワード
方法1,Object.assign
オブジェクト変更:
方法2,vue.set
オブジェクトも配列も使えます
例えば、dataの
this.$set(this.some.name,‘b’,2)
Vueは、作成するインスタンスに新しいルート応答式属性を動的に追加することは許されないが、vueを使用することができる.setメソッドは、ネストされたオブジェクトに対応するプロパティを追加します.
方法3 updateを使用する
オブジェクト変更:
oldObj = Object.assign({},newObj);
原理:オブジェクトは参照タイプであり、oldObjの属性指向アドレスを直接変更しても変化しないため、vueは必ずしも監視できるとは限らないので、オブジェクトを新規作成してoldObjフィールドに値を割り当てると、その指向アドレスを直接変更します.方法2,vue.set
オブジェクトも配列も使えます
this.$set(this,'oldObj',newObj);
this.$set(this,'oldArray',newArray);
例えば、dataの
some: { name: { a: 1, b: 3 } }
のbの値を変更するには、this.$set(this.some.name,‘b’,2)
Vueは、作成するインスタンスに新しいルート応答式属性を動的に追加することは許されないが、vueを使用することができる.setメソッドは、ネストされたオブジェクトに対応するプロパティを追加します.
方法3 updateを使用する
this.$forceUpdate()
、強制ビュー更新