我用vue 3实现了一个表单，表单由三个文本输入和一个复选框组组成。
我使用的是bootstrap-vue的形式，它的复选框组。
我调用一个API在表单上设置默认值，在API响应后，我像下面的代码一样更新ref，所有三个文本输入都得到了很好的更新。
问题出在复选框组组件上。被选中的项目不会被选中，尽管它们在tagList ref中。

// I set the formValues ref and api call to get default values in this composable.
// taglist will be a list of strings: tagList = ['example']
  const formValues = ref<IArticleFormValues>({
    title: '',
    body: '',
    description: '',
    tagList: [],
  });

  const { data, isFetching } = useQuery({
    queryKey: ['fetchArticleBySlug', slug],
    queryFn: () => fetchSingleArticleService(slug)
  });

  watch(data, () => {
    if (data.value?.article) {
      formValues.value = {
        ...data.value.article,
        tagList: data.value.article.tagList.map((item) => item),
      };
    }
  });

// I then inject this data using vue inject like this
provide(formInjectionKey, {  formValues });

字符串
下面是复选框组组件。tags只是这种格式的另一个选项列表。
第一个月
tagList也是这样的。
tagList = ['example']个

<script setup lang="ts">
import CustomCheckboxGroup from '@/components/DesignSystem/components/CustomCheckboxGroup.vue';
import { inject } from 'vue';

const { formValues } = inject(formInjectionKey);

</script>

<template>
<CustomCheckboxGroup v-else :options="tags" v-model="formValues.tagList" />
</template>

型
下面是CustomCheckboxGroup组件。

// CustomCheckboxGroup.vue
<script setup lang="ts">
defineProps<{ value?: any[]; options: any[] }>();
</script>

<template>
  <b-form-group>
    <b-form-checkbox-group
      :value="value"
      @input="$emit('input', $event)"
      :options="options"
      v-bind="$attrs"
      stacked
    ></b-form-checkbox-group>
  </b-form-group>
</template>

型