问题描述
我是VueJS的新手。
我正在尝试使用vee-validate验证vue-select。
因此,我尝试使用vuelidate,但无法获得所需的结果。
现在,我正在尝试使用vee-validate。 验证可以按需正常
但问题是 v模型。
我创建了一个全局变量 product ,以计算数组的长度,并将其传递给 v模型。这样,当其空产品的值将为零时,我可以从 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模型,因为那样我就不能在其中推送选项。我也无法将单个选项传递给v-model,那么我将无法获得理想的结果。
在选项数组为空时我要验证v-select
。有什么建议吗?
解决方法
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;
}