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

原创于 2022-11-22 14:47:51 发布 · 696 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue

本文介绍了一种在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
}
])