Vue.js
アレイ変化検出の警告
サーチ…
前書き
データオプションで初期化された配列の特定のインデックスに項目の値を設定しようとすると、vueは変更を検出できず、状態の更新をトリガーしません。この警告を克服するには、vueのVue。$ setを使用するか、Array.prototype.spliceメソッドを使用するか
Vueを使う。$ set
特定のインデックスで配列項目を変更するメソッドまたはライフサイクルフック
new Vue({
el: '#app',
data:{
myArr : ['apple', 'orange', 'banana', 'grapes']
},
methods:{
changeArrayItem: function(){
//this will not work
//myArr[2] = 'strawberry';
//Vue.$set(array, index, newValue)
this.$set(this.myArr, 2, 'strawberry');
}
}
})
Array.prototype.spliceの使用
Arrayプロトタイプのsplice()
を使用してVue.$set
を使用する代わりに、同じ変更を行うことができますVue.$set
new Vue({
el: '#app',
data:{
myArr : ['apple', 'orange', 'banana', 'grapes']
},
methods:{
changeArrayItem: function(){
//this will not work
//myArr[2] = 'strawberry';
//Array.splice(index, 1, newValue)
this.myArr.splice(2, 1, 'strawberry');
}
}
})
ネストされた配列の場合
yoiがネストされた配列を持っている場合、次のことができます
new Vue({
el: '#app',
data:{
myArr : [
['apple', 'banana'],
['grapes', 'orange']
]
},
methods:{
changeArrayItem: function(){
this.$set(this.myArr[1], 1, 'strawberry');
}
}
})
配列を含むオブジェクトの配列
new Vue({
el: '#app',
data:{
myArr : [
{
name: 'object-1',
nestedArr: ['apple', 'banana']
},
{
name: 'object-2',
nestedArr: ['grapes', 'orange']
}
]
},
methods:{
changeArrayItem: function(){
this.$set(this.myArr[1].nestedArr, 1, 'strawberry');
}
}
})
Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow