Я пытаюсь использовать vee-validate для проверки 3 полей (текстовых полей) на основе выбора другого поля (выберите), но я не могу понять, как я могу это сделать.
По сути, у меня есть поле выбора с 5 значениями, если выбранное значение равно 1 или 2, остальные 3 поля в форме являются обязательными.
Вот пример
Если я выберу «Ausente» (значение 1) или «A desenvolver» (значение 2), остальные 3 поля обязательны для заполнения.
Вот код, который я придумал
<v-col cols="2">
<validation-provider
rules="required"
v-slot="{ errors }"
name="skillLevel"
> <!-- If this select has value of 1 or 2 -->
<v-select
v-model="answers[n-1][index].skillLevel"
outlined
:error-messages="errors"
:items="selectLevels"
label="Selecione"
item-text="level"
item-value="value"
></v-select>
</validation-provider>
</v-col>
<!-- These 3 fields must be required -->
<v-col cols="2">
<validation-provider
name="feedback"
rules="required||isRequiredWith:@skillLevel"
>
<v-textarea v-model="answers[n-1][index].feedBack" outlined rows="3"></v-textarea>
</validation-provider>
</v-col>
<v-col cols="2">
<validation-provider name="selfAppraisal" rules="required">
<v-textarea
v-model="answers[n-1][index].selfAppraisal"
outlined
rows="3"
></v-textarea>
</validation-provider>
</v-col>
<v-col cols="3">
<validation-provider name="feedforward" rules="required">
<v-textarea v-model="answers[n-1][index].feedForward" outlined rows="3"></v-textarea>
</validation-provider>
</v-col>
Вот мой js
import { required} from "vee-validate/dist/rules";
import {
extend,
ValidationObserver,
ValidationProvider,
setInteractionMode
} from "vee-validate";
setInteractionMode("eager");
extend("required", {
...required,
message: "Campo não pode ficar em branco"
});
extend("isRequiredWith", {
params: ["target"],
validate(value, { target }) {
if (target === 1 || target === 2) {
console.log(target);
//Problem is here, i'm messing up the value/target, don't what i need to check
console.log("cannot be empty");
}
},
message: "Required"
});