web-dev-qa-db-fra.com

VueJS ajoute conditionnellement un attribut pour un élément

Dans VueJS, nous pouvons ajouter ou supprimer un élément DOM en utilisant v-if:

<button v-if="isRequired">Important Button</button>

mais existe-t-il un moyen d'ajouter/de supprimer des attributs d'un élément dom, par exemple, pour l'attribut requis suivant défini de manière conditionnelle:

Username: <input type="text" name="username" required>

par quelque chose de semblable à:

Username: <input type="text" name="username" v-if="name.required" required>

Des idées?

javascriptvue.jsvuejs2
50
Don Smythe

Essayer:

<input :required="test ? true : false">
63
cymruu

Forme la plus simple:

<input :required="test">   // if true
<input :required="!test">  // if false
<input :required="!!test"> // test ? true : false
35
Syed

<input :required="condition">

Vous n'avez pas besoin de <input :required="test ? true : false"> car si test est truthy vous aurez déjà l'attribut required et si test est falsy vous n'obtiendrez pas l'attribut. La partie true : false est redondante, un peu comme ceci ...

if (condition) {
    return true;
} else {
    return false;
}
// or this...
return condition ? true : false;
// can *always* be replaced by...
return (condition); // parentheses generally not needed

Le moyen le plus simple de faire cette liaison est alors <input :required="condition">

Si test (ou condition) peut être mal interprété, devez-vous faire autre chose? dans ce cas, l'utilisation de !! par Syed fait l'affaire.
<input :required="!!condition">

9
Stephen P

J'ai vécu le même problème et essayé les solutions ci-dessus !! Oui, je ne vois pas le prop mais cela ne remplit pas ce qui est requis ici.

Mon problème -

let isValid = false
<any-component
  :my-prop="isValue ? 'Hey I am when the value exist': false"
/>

Dans le cas ci-dessus, je m'attendais à ce que my-prop ne soit pas transmis au composant enfant - <any-conponent/>. Je ne vois pas le prop dans DOM, mais dans mon composant <any-component/>, une erreur survient après un échec de la vérification du type prop. Comme dans le composant enfant, je m'attends à ce que my-prop soit un String mais c'est boolean.

myProp : {
 type: String,
 required: false,
 default: ''
}

Ce qui signifie que la composante enfant a reçu l'accessoire même s'il s'agit de false. Tweak ici consiste à laisser le composant enfant prendre le default-value et également ignorer la vérification. undefined réussi fonctionne bien!

<any-component
  :my-prop="isValue ? 'Hey I am when the value exist' : undefined"
/>

Cela fonctionne et mon prop enfant a la valeur par défaut.

0
Satyam Pathak