VueJS ajoute conditionnellement un attribut pour un élément

Question

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/supprimer les attributs d'un élément dom, par exemple, pour l'élément suivant, définir conditionnellement l'attribut requis :

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

par quelque chose de similaire :

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

Des idées ?

Answer 1

Essayez :

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

Mise à jour : Cela a changé dans Vue 3, voir cette réponse https://stackoverflow.com/a/64598898

Answer 2

La forme la plus simple :

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

Answer 3

Le rendu conditionnel des attributs a été modifié dans Vue 3. Pour omettre un attribut, utilisez null o undefined .

Vue 2 :

<div :attr="false">
Result: <div>

<div :attr="null">
Result: <div>

Vue 3 :

<div :attr="false">
Result: <div attr="false">

<div :attr="null">
Result: <div>

Answer 4

<input :required="condition">

Vous n'avez pas besoin <input :required="test ? true : false"> car si test est véridique vous aurez déjà le required et si test est falsy vous n'obtiendrez pas l'attribut. Le site true : false La partie 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

La façon la plus simple de réaliser cette liaison est donc la suivante <input :required="condition">

Seulement si le test (ou condition ) peut être mal interprété si vous avez besoin de faire autre chose ; dans ce cas, l'utilisation par Syed de l'option !! fait l'affaire.
  <input :required="!!condition">

Answer 5

Vous pouvez passer boolean en le contraignant, en mettant !! avant la variable.

let isRequired = '' || null || undefined
<input :required="!!isRequired"> // it will coerce value to respective boolean 

Mais je voudrais attirer votre attention sur le cas suivant où le composant récepteur a défini type pour les accessoires. Dans ce cas, si isRequired a défini le type comme étant string puis en passant boolean faites en sorte que la vérification du type échoue et vous obtiendrez un avertissement de Vue. Pour corriger cela, vous pouvez éviter de passer cette prop, donc mettez simplement undefined et la proposition ne sera pas envoyée à component

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

Explication

J'ai rencontré le même problème et j'ai essayé les solutions ci-dessus ! Oui, je ne vois pas le prop mais cela ne répond pas à ce qui est demandé 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, ce à quoi je m'attendais n'est pas d'avoir my-prop sont transmises au composant enfant - <any-conponent/> Je ne vois pas le prop sur DOM mais dans mon <any-component/> une erreur apparaît à la suite de l'échec de la vérification du type de prop. Comme dans le composant enfant, je m'attends à ce que my-prop pour être un String mais c'est boolean .

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

Ce qui signifie que le composant enfant a reçu la prop même s'il est false . L'astuce ici est de laisser le composant enfant prendre le contrôle de l'application. default-value et aussi sauter le contrôle. Réussi undefined fonctionne cependant !

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

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