echars vue 添加数据没更新_Vue遍历数据，并添加到右侧数组

window.onload = function(){ new Vue({ el:'#my', data:{ lists:[ {name:'张学友1',qq:'23456324',id:1,state:false}, {name:'张学友2',qq:'25155345',id:2,state:false}, {name:'张学友3',qq:'5435525',id:3,state:false}, {name:'张学友4',qq:'5253266',id:4,state:false}, {name:'张学友5',qq:'52436546',id:5,state:false}, {name:'张学友6',qq:'5436745745',id:6,state:false}, {name:'张学友7',qq:'246154',id:7,state:false}, {name:'张学友8',qq:'146464',id:8,state:false}, {name:'张学友9',qq:'4536754',id:9,state:false}, {name:'张学友10',qq:'875464',id:10,state:false}, {name:'张学友11',qq:'353543',id:11,state:false} ], selectorList:[], flag:'show' }, methods:{ addList:function(list){ list.state = true; //当前单击的状态 //ID重复 三种方法 for(var i=0;i0) return; //ES6 this.selectorList.push(list); // this.selectorList = [...new Set(this.selectorList)]; }, delList:function(list,index){ this.selectorList.splice(index,1); //index 位置 1个数 this.lists.forEach((v,i)=>{ if(v.id == list.id) { v.state = false; } }) } } })}

html：

总好友 ({{lists.length}})

{{list.name}}({{list.qq}})

已选择 ({{selectorList.length}})

{{list.name}}({{list.qq}}) 《新程序员》：云原生和全面数字化实践50位技术专家共同创作，文字、视频、音频交互阅读

总结

以上是生活随笔为你收集整理的echars vue 添加数据没更新_Vue遍历数据，并添加到右侧数组的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。