vueinput
想用input删除选中的数组内容，无论你选多少个都可以删除
慕姐8265434浏览 458回答 1
1回答
-
繁花不似锦
this.$refs.checkeds.value是什么鬼，不应该是this.$refs.checkeds.checked<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> </style> </head> <body> <div id="box"> <div v-for="(item,index) in items"> <input type="checkbox" ref="checkeds" v-model="item[0].val"/> <span>{{item[0].name}}</span> </div> <button @click="removeAll">提交</button> </div> <script src="vue.js"></script> <script> var vm = new Vue({ el:"#box", data:{ items: { A: [{ name: '伊a', occupation: '广告摄影师', company: '公司' ,val:false}], B: [{ name: '伊b', occupation: '广告摄影师', company: '公司' ,val:false}], C: [{ name: '伊c', occupation: '广告摄影师', company: '公司' ,val:false}], D: [{ name: '丹d', occupation: '广告摄影师', company: '公司' ,val:false}], E: [{ name: '伊e', occupation: '广告摄影师', company: '公司' ,val:false}], F: [{ name: '伊f', occupation: '广告摄影师', company: '公司' ,val:false}], G: [{ name: '伊G', occupation: '广告摄影师', company: '公司' ,val:false}], H: [{ name: '丹h', occupation: '广告摄影师', company: '公司' ,val:false}], I: [{ name: '丹i', occupation: '广告摄影师', company: '公司' ,val:false}], J: [{ name: '丹j', occupation: '广告摄影师', company: '公司' ,val:false}], K: [{ name: '丹k', occupation: '广告摄影师', company: '公司' ,val:false}], }, checks:[] }, methods:{ removeAll:function(){ let keys = Object.keys(this.items); let values = Object.values(this.items); for(var i=0;i<values.length;i++){ if(values[i][0].val){ Vue.delete(this.items,keys[i]); } } console.log(this.items); } } }); </script> </body></html>用v-model要简单点<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> </style> </head> <body> <div id="box"> <div v-for="(item,index) in items"> <input type="checkbox" ref="checkeds" v-model="item.val" /> <span>{{item.name}}</span> </div> <button @click="sub">提交</button> </div> <script src="vue.js"></script> <script> var vm = new Vue({ el:"#box", data:{ items:[{name:"a",val:false},{name:"b",val:false},{name:"c",val:false},{name:"d",val:false}], checks:[] }, methods:{ sub:function(){// for(var i = this.items.length-1;i>=0;i--){ // if(this.items[i].val){// this.items.splice(i,1);// }// } 这个也可以 this.items = this.items.filter((s)=>{ return s.val == false; }) } }, created:function(){ } }); </script> </body></html>
随时随地看视频慕课网APP
相关分类
JavaScript