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

Il est important de comprendre que si vous souhaitez ajouter des attributs de manière conditionnelle, vous pouvez également ajouter une déclaration dynamique :

<input v-bind="attrs" />

où attrs est déclaré comme un objet :

data() {
    return {
        attrs: {
            required: true,
            type: "text"
        }
    }
}

Ce qui aura pour conséquence :

<input required type="text"/>

Idéal dans les cas où il y a plusieurs attributs.

Answer 2

Vous pouvez ajouter deux points avant l'attribut (vous pouvez également utiliser des conditions) comme suit

<div :class="current? 'active': '' " > 
<button :disabled="InvalidForm? true : false " >

Si vous voulez définir une valeur dynamique comme les props, vous pouvez également utiliser les deux points avant le nom de l'attribut comme :

<Child :data="userList" />

Answer 3

En html, utilisez

<input :required="condition" />

Et définir dans la propriété des données comme

data () {
   return {
      condition: false
   }
}

Answer 4

Vous pouvez aussi utiliser le calcul

<input :required="isRequired" />

Calculé :

computed: {
   isRequired () {
      return someLogic //Boolean, true or false
   }