Vee-Validate的Field组件与Vue Multiselect配合无法取值问题求解

问题核心 #

你当前的问题根源是自定义维护的groups.value没有同步给vee-validate的Field组件，Field管理的表单状态没有收到更新通知，所以一直保留初始空数组。

最小改动方案（无需修改现有逻辑） #

仅需要在模板的Multiselect组件上添加一行事件监听，把选中值同步给Field内置的更新方法即可：

<Field name="groups" v-slot="{ field }">
    <Multiselect 
        v-bind="field" 
        v-model="groups.value" 
        trackBy="groupName" 
        valueProp="id" 
        label="groupName"
        <!-- 新增这行事件监听 -->
        @update:model-value="field.onChange"
    >
    </Multiselect>
</Field>
<ErrorMessage name="groups" class="fv-plugins-message-container invalid-feedback"></ErrorMessage>

修改后Field即可实时收到Multiselect的选中值，表单提交时groups字段就会返回正确的id数组。

可选的更规范实现 #

如果不需要在表单逻辑外单独使用groups.value，可以直接把值的管理权完全交给vee-validate，代码更简洁：

1. 模板修改如下：

<Field name="groups" v-slot="{ field }">
    <Multiselect 
        v-bind="field" 
        trackBy="groupName" 
        valueProp="id" 
        label="groupName"
        <!-- 单独绑定Multiselect配置项 -->
        :mode="groups.mode"
        :options="groups.options"
        :searchable="groups.searchable"
        :createTag="groups.createTag"
    >
    </Multiselect>
</Field>
<ErrorMessage name="groups" class="fv-plugins-message-container invalid-feedback"></ErrorMessage>

2. setup里删除groups的value属性声明：

setup(){
    const groups = ref({
     mode: 'tags',
     // 删掉value: []这行，值交由vee-validate管理
     options: [],
     searchable: true,
     createTag: true,
    });

    store.dispatch(Actions.GET_GROUPS)
      .then((data) => {
        console.log(data);
        groups.value.options = data;
      })
      .catch(...);

    return {
     groups,
    };
}

后续需要获取groups选中值时，直接从vee-validate的表单提交对象中读取即可。

内容的提问来源于stack exchange，提问作者ejara