使用 vee-validate 验证 vue-select答案

【问题标题】：Validate vue-select with vee-validate使用 vee-validate 验证 vue-select
【发布时间】：2020-12-20 05:59:50
【问题描述】：

我是 VueJS 的新手。

我正在尝试使用 vee-validate 验证 vue-select。

我尝试过手动验证它，但这当然不是一个好方法。

所以，我尝试使用 vuelidate 但无法获得想要的结果。

现在我正在尝试使用 vee-validate。 验证工作正常根据需要

但问题是 v-model。

我创建了一个全局变量product，用来计算数组的长度，并传入v-model。这样当它的空产品的值为零时，我可以从 vee-validation 返回所需的结果。

这是 .vue html 部分。

<ValidationObserver>
  <form @submit.prevent="add">
    <div class="row row-xs mx-0">
      <label class="col-sm-4 form-control-label">
        <span class="tx-danger">*</span> Add product(s):
      </label>
      <div class="col-sm-8 mg-t-10 mg-sm-t-0">
        <ValidationProvider rules="required" v-slot="{ errors }">
          <v-select
            name="product"
            placeholder="Add product(s)"
            :options="availableProducts" <-- here is the options array
            :reduce="name => name"
            label="name"
            @input="setSelected"
            v-model="product" <-- this calculates length and pass it to vee **extends**
          >
          </v-select>
          <div v-for="error in errors" :key="error"> {{ error }} </div>
          </ValidationProvider>
      </div>
      <!-- col-8 -->
    </div>
  </form>
</ValidationObserver>

这是 validation.js 文件

import { extend } from 'vee-validate';

extend('required', value => {
    console.log(value);
    return value > 0;
});

我不希望这个产品价值在那里。我也知道这不是一个好方法。我无法将整个数组传递给 v-model，因为这样我就无法在其中推送选项。我也无法将单个选项传递给 v-model，否则我将无法获得所需的结果。

我想在选项数组为空时验证v-select。有什么建议吗？

【问题讨论】：

标签： vue.js validation vee-validate vue-select

【解决方案1】：

Veevalidate 不会直接在选择元素上进行验证。这是我的解决方法。

您应该创建一个v-field“隐藏”输入和一个可见的select v-model 元素。 veevalidate 将在 v-field 上进行。

这是一个例子。

<v-field type="text" class="form-control disabled" name="expirationMonth" v-model="expirationMonth" :rules="isRequired" style="display:none;"></v-field>
<select v-model="expirationMonthUI" class="form-control" @click="synchExpirationMonthUI">
                                    <option value="January">January</option>
                                    <option value="February">February</option>
                                    <option value="March">March</option>
                                    <option value="April">April</option>
                                    <option value="May">May</option>
                                    <option value="June">June</option>
                                    <option value="July">July</option>
                                    <option value="August">August</option>
                                    <option value="September">September</option>
                                    <option value="October">October</option>
                                    <option value="November">November</option>
                                    <option value="December">December</option>
                                </select>
<error-message name="expirationMonth"></error-message>

然后将其添加到您的方法中以将两者同步。

synchExpirationMonthUI() {
     this.expirationMonth = this.expirationMonthUI;
}

【讨论】：