Vue使用v-for显示列表时，数组里的item数据更新，视图中列表不同步更新的解决方法

• 由于初始化类型错误导致的不更新，代码是这样的：

    
    
    



    

        
update
        

            

                {{item.text}}
            
        
    

使用索引直接更新数组中的项目，比如：

this.groceryList[0].text = "newvalue"

发现视图中的项目并不会更新
问题出在 let adddata = []; 写错了，让adddata是一个数组类型了，vue在监听数据更新的时候，判断是数组类型，并不会对它的属性的变更做处理，而只会对数组里元素的改变做处理，把 let adddata = []; 改成 let adddata = {};即可
或这样也可以：

let adddata = {
                id: 0,
                text: "test"
            };
    
this.groceryList.push(adddata);

• vue不能检测到数组元素的直接赋值，比如：

    
    
    



    

        
update
        

            

                {{item.text}}
            
        
    






this.groceryList[0] = {
                    id: 0,
                    text: "newvalue"
                };
            }

vue不能检测这种改变，只能检测到push,pop等元素出入栈的操作
可以改成这样,把旧元素替换成新元素（旧元素出栈，新元素入栈）

update: function() {
                this.groceryList.splice(0, 1, {
                    id: 0,
                    text: "newvalue"
                });
                
            }
        },

即使groceryList是一个普通的非对象数组，也需要这样才能同步更新视图

    
    
    



    

        
update
        

            

                {{item}}