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 y a-t-il un moyen d'ajouter / supprimer des attributs d'un élément dom, par exemple pour les éléments suivants, définissez sous condition 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?

Essayer:

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

Forme la plus simple:

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

<input :required="condition">

Vous n'en avez pas besoin <input :required="test ? true : false">car si test est véridique, vous obtiendrez déjà l' requiredattribut, et si test est faux, vous n'obtiendrez pas l'attribut. La true : falsepartie est redondante, un peu comme ça ...

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 donc <input :required="condition">

Ce n'est que si le test (ou la condition ) peut être mal interprété que vous devrez faire autre chose; dans ce cas, l'utilisation de Syed !!fait l'affaire.
  <input :required="!!condition">

Vous pouvez passer booleanen le contraignant, mettre !!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 isRequireda défini le type à stringpasser, la booleanvérification du type échoue et vous obtiendrez un avertissement Vue. Pour résoudre ce problème, vous voudrez peut-être éviter de passer cet accessoire, alors mettez simplement un undefinedrepli et l'accessoire ne sera pas envoyé àcomponent

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

Explication

J'ai traversé le même problème et j'ai essayé les solutions ci-dessus !! Oui, je ne vois pas leprop mais cela ne remplit pas réellement 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, ce à quoi je m'attendais, c'est de ne pas avoir my-propété transmis au composant enfant - <any-conponent/>je ne vois pas le propin DOMmais dans mon <any-component/>composant, une erreur apparaît lors de l'échec de la vérification de type prop. Comme dans le composant enfant, je m'attends my-propà être unString mais c'est le cas boolean.

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

Ce qui signifie que le composant enfant a reçu l'accessoire même s'il l'est false. Tweak ici est de laisser le composant enfant prendre le default-valueet également sauter le contrôle. PasséundefinedTravaux cependant!

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

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

En utilisation html

<input :required="condition" />

Et définissez dans la propriété de données comme

data () {
   return {
      condition: false
   }
}