問題：利用v-for渲染資料，通過方法改變了資料，檢視沒有更新。

原因：由於javascript的限制，Vue不能檢測到以下變動的陣列（如：objArr）：

1.通過索引直接設定陣列的某個值，this.objArr[index] = newValue;

2.通過索引直接設定陣列中物件的某個屬性，this.objArr[index].pro = newValue;

3.通過修改陣列的長度，this.objArr.length = newLength;

解決重點：實現類似this.objArr[index] = newValue的效果，同時能更新檢視

解決辦法：

1.索引直接設定陣列的某個值

   

    

     
      
     
     
      
       //1.Vue.set
      
     
    

     
      
     
     
      
       Vue.set(
       this.objArr,index,newValue)  
       //(陣列，索引，值)
      
     
    

     
      
     
     
       
      
     
    

     
      
     
     
      
       //2.prototype.splice
 

      
     
    

     
      
     
     
      
       this.objArr.splice(index,
       1,newValue) 
       //(索引，長度，值)
      
     
    

     
      
     
     
       
      
     
    

     
      
     
     
      
       //3.Object.assign
      
     
    

     
      
     
     
      
       this
 
.objArr[index] = newValue
      
     
    

     
      
     
     
      
       this.objArr = 
       Object.assign({},
       this.objArr) 
       //存在弊端，該objArr的型別會從陣列變成物件
      
     
   
   

2.索引直接設定陣列中物件的某個屬性

   

    

     
      
     
     
      
       //1.Vue.set
      
     
    

     
      
     
     
      
       this.objArr[index].pro = newValue
      
     
    

     
      
     
     
      
       var tempObj = 
       this.objArr[index]
      
     
    

     
      
     
     
      
       Vue.set(
       this.objArr,index,tempObj)  
       //(陣列，索引，值)
      
     
    

     
      
     
     
       
      
     
    

     
      
     
     
      
       //2.prototype.splice
      
     
    

     
      
     
     
      
       this.objArr[index].pro = newValue
      
     
    

     
      
     
     
      
       var tempObj = 
       this.objArr[index]
      
     
    

     
      
     
     
      
       this.objArr.splice(index,
       1,tempObj) 
       //(索引，長度，值)
      
     
    

     
      
     
     
       
      
     
    

     
      
     
     
      
       //3.Object.assign
      
     
    

     
      
     
     
      
       this.objArr[index].pro = newValue
      
     
    

     
      
     
     
      
       this.objArr = 
       Object.assign({},
       this.objArr) 
       //存在弊端，該objArr的型別會從陣列變成物件
      
     
   
   

3.修改陣列的長度

   

    

     
      
     
     
      
       //1.prototype.splice
      
     
    

     
      
     
     
      
       this.objArr.splice(
       this.objArr.length,
       0,
       new 
       Object()) 
       //(索引，長度，值) 從長度索引開始增加一個新的物件。
      
     
    

     
      
     
     
       
      
     
    

     
      
     
     
      
       //2.Object.assign
      
     
    

     
      
     
     
      
       this.objArr.length = newLength
      
     
    

     
      
     
     
      
       this.objArr = 
       Object.assign({},
       this.objArr) 
       //存在弊端，該objArr的型別會從陣列變成物件
      
     
   
   

解決例項：

下載地址

推薦閱讀：

事件捕獲、事件冒泡詳解

JS將數字轉成貨幣形式的簡單方法

原文:https://blog.csdn.net/a646070718/article/details/80147075