阻止复选框默认冒泡事件


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

  

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM