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()來排序

 

、、、、、、、、、、、、、、、、、、、、、、