阻止复选框默认冒泡事件
<input type="checkbox" v-on:click.prevent="onClick" />
数组渲染因为下标问题,导致点上一个复选框拿走数据之后,下一个数据的复选框状态会改变,所以通过prevent去阻止事件的冒泡。让复选框依然是数据的原本状态,这是第一种解决办法。
第二种解决办法就是直接找到checked重新改成true状态
<template> <div v-for="(item,index) in list" :key="index"> <input type="checkbox" :checked="item.state" v-on:click="onClick(index)" /> </div> <template/> <script> export default{ data(){ return{ list:[ {id:1,state:true}, {id:2,state:true}, {id:1,state:true}, {id:1,state:true} ] } }, methods:{ onClick(i){ this.list.splice(i,1); //通过event 找到状态重新改成原来的true window.event.target.checked=true; } } } </script>