elementPlus+vue3易踩的坑之el-radio单选框:为什么默认选项都被勾选了?

出错的效果:

选项都被选中了......

明明是从elementplus复制过来的代码(如下),怎么会出现这个情况呢?

<el-radio-group v-model="radio">
						<el-radio value="1">通过</el-radio>
						<el-radio value="2">不通过</el-radio>
					</el-radio-group>


const radio= ref(1);

解决办法:

将el-radio的value修改为label就可以啦!

<el-radio-group v-model="radio">
						<el-radio label="1">通过</el-radio>
						<el-radio label="2">不通过</el-radio>
					</el-radio-group>


const radio= ref(1);

原因说明:

elementPlus官方解释:

label 作为 value 来使用已经被 废弃, 建议label 只用来表示展示的文字,这个被废弃的用法将会在 elementPlus   3.0.0 版本被移除,新 API value 在2.6.0 中已经可用,您可以使用 value API 来设置复选框的值。

也就是说,elementPlus的版本在2.6.0 以下的同学,还是要使用label字段的哟!可以通过修改为label字段解决这个问题,也可通过升级elementPlus版本来解决这个问题呦!

Vue中,你可以使用`v-model`指令来处理单选框和多选框的选中状态。 对于单选框,你可以将每个单选框的value绑定到一个data属性上,并使用`v-model`来绑定选中的值。当用户选择不同的选项时,绑定的data属性的值会自动更新。 示例代码如下: ```html <template> <div> <input type="radio" id="option1" value="option1" v-model="selectedOption"> <label for="option1">Option 1</label> <input type="radio" id="option2" value="option2" v-model="selectedOption"> <label for="option2">Option 2</label> <input type="radio" id="option3" value="option3" v-model="selectedOption"> <label for="option3">Option 3</label> <p>Selected option: {{ selectedOption }}</p> </div> </template> <script> export default { data() { return { selectedOption: '' }; } }; </script> ``` 对于多选框,你可以将每个多选框的value绑定到一个数组中,并使用`v-model`来绑定选中的值。当用户选择或取消选择不同的选项时,绑定的数组会自动更新。 示例代码如下: ```html <template> <div> <input type="checkbox" id="option1" value="option1" v-model="selectedOptions"> <label for="option1">Option 1</label> <input type="checkbox" id="option2" value="option2" v-model="selectedOptions"> <label for="option2">Option 2</label> <input type="checkbox" id="option3" value="option3" v-model="selectedOptions"> <label for="option3">Option 3</label> <p>Selected options: {{ selectedOptions }}</p> </div> </template> <script> export default { data() { return { selectedOptions: [] }; } }; </script> ``` 这样,你就可以在Vue中使用`v-model`来处理单选框和多选框的选中状态了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值