element-ui之el-checkbox遇到的一些问题

el-checkbox绑定了v-model却不能响应

 <el-checkbox 
	 style="transform: translateY(50%);" 
	 v-model="option.isDefaults" 
 	:label="''" 
 	@click.prevent.native="setDefaultOption(index)"
 ></el-checkbox>

看到我这里使用v-model绑定了一个属性,但是当这个属性变为true的时候checkbox也不会是选中状态,后来查阅别人的文章,发现可能是我没有绑定label,别人的文章中说到,绑定了v-model却不能正常响应的原因是因为label绑定的值必须是要string,而我这里却连绑定都没绑定,后来加上了label之后checkbox就可以正常响应了。

el-checkbox绑定点击事件会有两次回调

由于一些特殊的需求,我需要对checkbox绑定点击事件,但是绑定之后我发现并不能响应绑定的函数,后来找到是需要使用.native来绑定事件,然后新问题又来了,绑定的回调函数会被调用两次,我使用了.stop阻止其冒泡并没有用,后来才找到是需要使用.prevent,这样就可以只触发一次了,但是原理不详,需要注意的是,如果使用了.prevent,点击的时候checkbox就不会被选中了,需要在点击回调函数里面手动将checkbox绑定的对应属性置为true才能改变checkbox的选中状态。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值