Vue.js
Les modifications de détection de la matrice
Recherche…
Introduction
Lorsque vous essayez de définir une valeur d'un élément à un index particulier d'un tableau initialisé dans l'option de données, la vue ne peut pas détecter la modification et ne déclenche pas de mise à jour de l'état. Afin de surmonter cet avertissement, vous devez soit utiliser Vue. $ Set ou utiliser la méthode Array.prototype.splice.
Utilisation de Vue. $ Set
Dans votre méthode ou tout crochet de cycle de vie qui modifie l'élément de tableau à un index particulier
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');
}
}
})
Voici le lien vers le violon
Utiliser Array.prototype.splice
Vous pouvez effectuer le même changement au lieu d'utiliser Vue.$set en utilisant le splice() du prototype Array
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');
}
}
})
Pour un tableau imbriqué
Si vous avez un tableau imbriqué, vous pouvez procéder comme suit
new Vue({
el: '#app',
data:{
myArr : [
['apple', 'banana'],
['grapes', 'orange']
]
},
methods:{
changeArrayItem: function(){
this.$set(this.myArr[1], 1, 'strawberry');
}
}
})
Voici le lien vers le jsfiddle
Tableau d'objets contenant des tableaux
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');
}
}
})
Voici le lien vers le violon
Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow