Je souhaite donc adapter la dénomination de la saisie automatique pour les anniversaires. Cependant, cela conduit à plusieurs problèmes. Maintenant, j'ai besoin de savoir si je peux forcer vee-validate à changer le nom du champ.
Pour mieux le comprendre. Voici à quoi il ressemble actuellement:
<select
v-model="day"
id="day"
name="bday-day"
:class="{'invalid' : errors.has('day')}"
v-validate="{required: true, excluded: 0, name: 'day'}"
>
<option
:disabled="true"
value="0"
v-text="trans('food.Day')"
/>
<option
v-for="n in 31"
:key="n"
:value="n"
v-text="n"
/>
</select>
<span
class="bar"
:class="{'invalid' : errors.has('day')}"
/>
Le nom du champ de sélection est "jour". Cependant, selon ceci a >, il devrait être nommé: "bday-day".[
Puisque j'utilise vee-validate, cela conduit à renommer le nom du champ en "bday-day ". Désormais, errors.has ('day')} ne fonctionnera plus.
Mais même si je change cela en errors.has ('bday-day') , je ne peux pas utiliser mon observateur interne pour les changements de valeurs. J'obtiens l'erreur:
Chemin d'observation échoué: "bday-day" Watcher n'accepte que les chemins simples délimités par des points. Pour un contrôle total, utilisez plutôt une fonction.
C'est parce que je dois forcer le même nom que le nom du v-model et le nom vee-validate. v-model = "bday-day" ne peut pas fonctionner.
Pour faire court. Mon objectif final est quelque chose comme ceci:
<select
v-model="day"
id="day"
name="day"
:class="{'invalid' : errors.has('day')}"
v-validate="'required|excluded:0'"
>
<option
:disabled="true"
value="0"
v-text="trans('food.Day')"
/>
<option
v-for="n in 31"
:key="n"
:value="n"
v-text="n"
/>
</select>
<span
class="bar"
:class="{'invalid' : errors.has('day')}"
/>
J'utiliserais le name = "bday-day" pour le remplissage automatique, mais je définirais le champ nom pour vee validez en nom: 'jour' .
3 Réponses :
data-vv-name Vee-validate vous a couvert et vous pouvez configurer l'attribut data-vv-name pour y parvenir précisément:
<select
v-model="day"
id="day"
name="bday-day"
:class="{'invalid' : errors.has('day')}"
v-validate="'required|excluded:0'"
data-vv-name="day"
>
Les membres errors et fields fournis par vee-validate auront un Entrée jour , au lieu d'utiliser le nom d'entrée bday-day . Ainsi, si vous avez un observateur sur errors.day , vous n'aurez pas ce vilain problème avec le chemin d'observation de bday-day .
Si vous utilisez VeeValidate v3 , vous pouvez définir l'attribut "name" pour le ValidationProvider
<ValidationProvider name="day" rules="required|excluded:0" v-slot="{ errors }">
Avec VeeValidate v3, vous avez deux options pertinentes que vous pouvez transmettre à ValidationProvider , name et vid .
Les documents de VeeValidate spécifient que :
nom spécifie un nom de champ à utiliser dans les messages d'erreur.
vid est un identifiant utilisé pour les règles basées sur la cible / les champs croisés.
De mes tests cependant, vid est également utilisé comme clé pour les champs et les erreurs dans le ValidationObserver si fourni, et sinon, il revient à name.
Par conséquent, si vous avez plusieurs des mêmes champs dans un formulaire, et que vous cherchez pour avoir un nom de clé unique (afin qu'ils ne se heurtent pas et ne se cassent pas), puis utilisez name uniquement pour le nom du champ dans les messages d'erreur, et vid pour fournir un ID unique à utiliser par ValidationObserver dans les objets champs et erreurs . Par exemple:
<ValidationProvider
name="hours" // used for error messages
:vid="hours-${unique-part}" // unique key to stop clashes
rules="required"
v-slot="{ errors }"
>...</ValidationProvider>