vue3 配置数据用于for循环遇到的坑

本文介绍了一种在Vue中配置Checkbox及其组时遇到的响应性丢失问题及其解决方案。通过使用ref将配置设置为响应式,确保了Checkbox及Checkbox组能够正常响应状态变化。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题:

比如需要循环一堆CheckBox,为了少在template里写代码,需要配置一组数据循环一下,配置里面包括CheckBox需要绑定的值,CheckBox group需要绑定的值,以及绑定的change事件等,有两层循环,这时最里面的循环绑定的值失去了响应性,导致CheckBox选不上。

解决方法:

这个配置写成响应式的,即最外层包裹ref

如:

<template v-for="item in myConfig" :key="item.id">
    <n-checkbox 
        :checked="item.checked" 
        :label="item.label"    
        @update:checked="item.checkedChange" />
    <n-checkbox-group v-model:value="item.modelVal">
        <template v-for="fd in item.field" :key="fd">
            <n-checkbox :value="fd" :label="fd" />
        </template>
    </n-checkbox-group>
</template>
const myConfig = ref([
{
    fields: fields1,
    label: '某某某',
    modelVal: selectedFields1,
    checked: fields1Checked,
    handleUpdateValue: handleUpdateValue1,
    checkedChange: checkedChange1
}
])

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值