首先要解決這個問題，我們要清楚產生這個問題的原因。

vue之所以能夠監聽Model的變化，是因為Javascript語言本身提供了Proxy或者Object.observe()的機制來監聽物件狀態的變化。

但是，對於陣列元素的賦值卻沒有辦法直接進行監聽，因此會產生以下情況：

比如我們vue的data裡建立一個json陣列：

list:[
        {"name":"蘋果"},
        {"name":"橘子"},
        {"name":"香蕉"}
     ],

此時迴圈輸出以後，頁面會渲染出的畫面

然後我們設定一個按鈕點選觸發改變陣列的操作

change(){
     console.log("change");
     this.list[0]={"name":"小豬"};
}

此時觸發事件後你會發現頁面沒有變化。

個人觀點是因為json是個物件，你改變物件的自身屬性，對它是個物件的事實並沒有產生影響，所以vue檢測不到變化。

如果想要改變陣列，那我們不應該用賦值的方法而是應該用更新來使陣列改變

1、用  this.list[0].name = "小豬"  來更新陣列

2、將整個list陣列更換掉

3、用vue能監聽到的操作來更新陣列  比如：splice  push  unshift 等

4、使用this.$set( target , key , value ); 強制渲染頁面

      target：要更改的資料來源（可以是物件或者陣列）；

      key：要更改的具體資料

      value：重新賦的值

以上只是在專案中遇到的自己的解決思路，有更好方法的歡迎留言