用vueJS绑定chekbox,在label上加点击事件改变chekbox状态,状态更改有问题,怎么办?
用vueJS绑定chekbox,在label上加点击事件改变chekbox状态。点击label的文字时,数据模型改变(checked),checkbox的选中状态也会改变。但是直接点chekbox,数据模型已经改变,但是选中状态不改变,这是怎么回事?求救!
点击label里的文字时,数据模型可以与chekbox状态对应:
点击checkbox时,无论数据模型如何变化,checkbox状态都不会改变:
<template>
<td class="role-first-category">
<div class="checkbox">
<label @click.prevent="menuRolePowerChange(menu)">
<input type="checkbox" v-model="menu.checked">
{{menu.Text}}
</label>
</div>
</td>
</template>
<script>
module.exports = {
props: ['menu'],
methods: {
//去除角色权限时,给出警告
menuRolePowerChange: function (menu) {
if (menu.checked && menu.ID == 3) {
this.$dispatch('transmit','tip',{
name: '提示:',
contentText: '确定要取消角色权限吗?取消后将无法再进行权限管理!',
btnName: '确定',
events: {
confirm: 'cancelRolePower'
}
});
this.$once('cancelRolePower',function () {
menu.checked = false;
});
} else {
menu.checked = !menu.checked ;
}
},
}
}
</script>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
1L那样写比较好,实现点文字也起作用的话,给label加上for属性指向checkbox就行。