Vue.js
Zastrzeżenia dotyczące wykrywania zmiany tablicy
Szukaj…
Wprowadzenie
Podczas próby ustawienia wartości elementu na określonym indeksie tablicy zainicjowanej w opcji danych, vue nie może wykryć zmiany i nie wyzwala aktualizacji stanu. Aby pokonać to zastrzeżenie, należy albo użyć zestawu Vue. $ Vue, albo metody Array.prototype.splice
Korzystanie z Vue. $ Set
W twojej metodzie lub dowolnym haku cyklu życia, który zmienia element tablicy przy określonym indeksie
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');
}
}
})
Korzystanie z Array.prototype.splice
Możesz wykonać tę samą zmianę zamiast używać Vue.$set za pomocą splice() prototypu Array splice()
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');
}
}
})
Dla zagnieżdżonej tablicy
Jeśli masz zagnieżdżoną tablicę, możesz wykonać następujące czynności
new Vue({
el: '#app',
data:{
myArr : [
['apple', 'banana'],
['grapes', 'orange']
]
},
methods:{
changeArrayItem: function(){
this.$set(this.myArr[1], 1, 'strawberry');
}
}
})
Oto link do jsfiddle
Tablica obiektów zawierających tablice
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
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow