#vue.js #validation #vee-validate #vue-select
#vue.js #проверка #vee-проверка #vue-выбор
Вопрос:
Я новичок в VueJS.
Я пытаюсь проверить vue-select с помощью vee-validate.
Я пытался проверить это вручную, но, конечно, это не очень хороший подход.
Итак, я попытался использовать vuelidate, но не смог получить желаемого результата.
Теперь я пытаюсь использовать vee-validate. Проверка работает нормально по желанию
но проблема в v-образной модели.
Я создал глобальную переменную 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
, когда массив опций пуст. Есть предложения?
Ответ №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;
}
Ответ №2:
Я нашел способ сделать это с помощью рендеринга сложных полей с ограниченными слотами из документации Vee-Validate. И используя привязки из Vue Select, это выглядит примерно так:
<Field name="supportType" v-slot="{ field }" v-model="supportType">
<v-select :options="mediaTypes" label="name" :reduce="mediaType => mediaType.id" v-bind="field">
</v-select>
</Field>
Как вы можете видеть, я использую здесь имя, v-слот и v-модель для поля из Vee-Validate, как обычно. Но v-slot
это очень важно, поскольку оно переносит информацию из Vue Select в Vee-Validate, или, по крайней мере, я так думаю.
С другой стороны, я использую опции label, reduce и v-bind из Vue Select, которые я использую для обработки информации. Итак, с помощью :options
я выбираю свой набор данных, с помощью label
я указываю Vue Выбрать, какую метку выбрать и отобразить из набора данных, с помощью :reduce
я указываю Vue Выбрать, каким будет значение тега выбора, и, наконец, использую v-bind
для привязки значения выбора к полю проверки Vee. Таким образом, информация, используемая в :reduce
свойстве, будет отображаться на v-model="supportType"
.
Я протестировал это с помощью кнопки, и это сработало. И мне понравился этот способ, поэтому он не такой грязный, и я могу использовать проверку и другие вещи, как обычно.
Надеюсь, это кому-нибудь поможет.
PD: Я использую Vue 3 и последний на сегодняшний день пакет как Vee-Validate, так и Vue Select.