el-checkbox 无法动态设置勾选状态

问题

cheked 值动态变化,但是勾选状态无法动态改变

解决

v-model 与:checked 同时使用

html 复制代码
 <el-checkbox 
 class="add-shop-check" 
 v-model="renderData[0].isCheck" 
 :checked="renderData[0].isCheck" 
 @change="checked => selectChange(checked, 0)"
 ></el-checkbox>

v-modle:双向绑定:

通过修改checked的值可以控制复选框的选中状态,通过点击复选框选中或者取消选中复选框可以修改checked的值。
checked:初始选中状态:

设置复选框初始是否被选中,后期不能通过修改checked值改变复选框选中状态,也不能通过点击复选框修改checked的值。
value:单项绑定:

只能通过修改checked值改变其选中状态,不能通过点击复选框改变checked值,不能通过点击改变其选中状态,其选中状态依赖value,若想实现点击改变其选中状态可以添加change事件,通过change事件修改value值。

相关推荐
玫城1 天前
[ VUE ] 封装通用数组校验组件,el-input内使用
前端·javascript·vue.js
弓.长.1 天前
React Native 鸿蒙跨平台开发:实现一个多功能单位转换器
javascript·react native·react.js
南半球与北海道#1 天前
前端打印(三联纸票据打印)
前端·vue.js·打印
摘星编程1 天前
React Native for OpenHarmony 实战:ToggleSwitch 切换开关详解
javascript·react native·react.js
董世昌411 天前
深入浅出 JavaScript 常用事件:从原理到实战的全维度解析
前端
满栀5851 天前
分页插件制作
开发语言·前端·javascript·jquery
qq_406176141 天前
深入剖析JavaScript原型与原型链:从底层机制到实战应用
开发语言·前端·javascript·原型模式
弓.长.1 天前
React Native 鸿蒙跨平台开发:BottomSheet 底部面板详解
javascript·react native·react.js
开开心心_Every1 天前
免费窗口置顶小工具:支持多窗口置顶操作
服务器·前端·学习·macos·edge·powerpoint·phpstorm
摘星编程1 天前
React Native for OpenHarmony 实战:Permissions 权限管理详解
javascript·react native·react.js