vue數組操作不更新視圖問題
vue 觀察數組的變異方法 更新視圖
push（）
pop()
shift()
unshift()
splice(i,n,arr)
sort(xx)
reverse()
ex: app.book.push({
name:‘css‘,
author:‘lee‘
})
有些方法不會改變數組
filter()
concat()
slice()
返回新數組 需要用 新返回的數組 更新原數組
app.books= app.books.filter(functiion(item){
return item.name.match(/javascript/)
})
vue 不能檢測到數組變化 不能觸發視圖更新：
1 通過直接搜影 更改變量
ex app.book[3] = ‘xxxx‘;
2 修改數組的長度
app.books.length =1;
解決這個問題 倆種方法
1 vue 內置的set方法 類 splice
Vue.set(app.books,3,{
name:‘qqq‘,
author:‘qjb‘
})
2 webpack 沒有引入Vue 用 $set
this.$set(app.books,3,{
name:‘css‘,
author:‘qjb‘
})
this指向組建的實例 既 app ，可以使用app.$set()
3 使用 splice
appp.book.splice(3,1,{
name:‘css‘,
author:‘qjb‘
})
splice(索引，刪除的數量(0不刪除)，插入的變量arr1,arr2,arr3)
更改索引
app.books.splice(1);
、、、、過濾與排序。。。。。。。
不改變原數組
computed:{
filterBooks:function(){
return this.books.filter(function(book){
return book.name.match(/javascript/)
})
}
}
sort()來排序
、、、、、、、、、、、、、、、、、、、、、、
vue數組操作不更新視圖問題