vue.js - 使用 Vee-Validate 的 和 Vue Multiselect 的问题

Question

希望你们中的一些人能帮助我，可能我弄错了，但我无法使 Field 组件从 Multiselect 元素获取输出。在从 5 个不同步骤接收字段输入的 Metronic8 向导中，我试图获得这个

<Field name="groups" v-slot="{ field }">
    <Multiselect v-bind="field" v-model="groups.value" trackBy="groupName" valueProp="id" label="groupName">
    </Multiselect>
</Field>
<ErrorMessage name="groups" class="fv-plugins-message-container invalid-feedback"></ErrorMessage>

在向导的 vee-validate 表单数据中，我将组声明为要由该字段传递的数组，具有默认值[]。在 setup 函数中，我定义了这些默认值，以通过分派(dispatch)到商店的操作获取 Multiselect 的选项

    setup(){
    const groups = ref({
     mode: 'tags',
     value: [],
     options: [],
     searchable: true,
     createTag: true,
    });

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

    return {
     groups,
        };
    }

在没有 Field 组件的情况下，Multiselect 工作正常，并返回我的对象​​ id 的数组。但是当我 console.log 每个向导的“下一步”按钮的输出时，数组保持默认值。

{campaignName: "hello, world", groups: Array(0), ... }

我不太确定 Field 如何从多选中获取值，因此组在下面的对象中显示为空是可以预料的。你如何结合它们？在不改变太多逻辑的情况下，有没有更好的选择？请帮忙，感谢您抽出宝贵时间!

Answer 1

这就是您所需要的。

    v-validate data-vv-rules="required" data-vv-name="form.corporate.id"

这对我有用。

<multiselect
    v-validate data-vv-rules="required" data-vv-name="form.corporate.id"
    v-model="form.corporate"
    :options="corporates"
    :multiple="false"
    :allow-empty="false"
    track-by="id"
    label="title"
    placeholder="">
</multiselect>
<div v-if="errors.has('form.corporate.id')" class="form-control-feedback form-text" v-cloak>@{{ errors.first('form.corporate.id') }}</div>