使用 Vee-Validate 的 <Field /> 和 Vue Multiselect 的问题

Question

希望一些人能够帮助我，也许是我的理解有误，但我就是无法让Field组件从Multiselect元素中获取输出。 在一个接收来自5个不同步骤的Fields输入的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表单向导中，我将groups声明为一个数组，以默认值[]交付给该Field。 在setup函数中，我通过调度到store的action来定义这些获取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如何从Multiselect获取值，因此在下面的对象中出现空组是可以预期的。如何将它们组合在一起？是否有更好的选项而不需要改变太多逻辑？请帮忙，并感谢您的时间！

- ejara

Answer 1

您可以像下面展示的那样，将Vee-validate Field组件与VueMultiselect组件结合使用。

要为字段设置默认值，您可以在Field组件上使用value属性。

<Field name="yourFieldName" :value="defaultValue" v-slot="{ field }">
 <Multiselect
 v-bind="field"
 v-model="field.value"
 :options="options"
 ></Multiselect>
</Field>

- laurisstepanovs

---

v-bind="field" 是解决我的问题的关键。Vue 3.2.41，Vee 4.11.7，Multiselect 3.0.0-beta.2 - undefined

Answer 2

这就是你需要的。

    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>

- Fahri Meral