阻止复选框默认冒泡事件

<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>
    

  

 

posted @ 2020-04-24 22:15  吴小恩  阅读(2130)  评论(0编辑  收藏  举报