VueJS agrega condicionalmente un atributo para un elemento

En VueJS podemos agregar o eliminar un elemento DOM usando v-if:

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

pero, ¿hay alguna manera de agregar / eliminar atributos de un elemento dom? Por ejemplo, para lo siguiente, establezca condicionalmente el atributo requerido:

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

por algo similar a:

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

¿Algunas ideas?

Tratar:

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

La forma mas simple:

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

<input :required="condition">

No es necesario <input :required="test ? true : false">porque si la prueba es verdadera , ya obtendrá el requiredatributo, y si la prueba es falsa , no obtendrá el atributo. La true : falseparte es redundante, muy parecida a esta ...

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 forma más sencilla de hacer este enlace, entonces, es <input :required="condition">

Solo si la prueba (o condición ) puede malinterpretarse, necesitaría hacer otra cosa; en ese caso, el uso de Syed !!hace el truco.
  <input :required="!!condition">

Puede pasar booleanforzándolo, ponerlo !!antes de la variable.

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

Pero me gustaría llamar su atención sobre el siguiente caso en el que el componente receptor se ha definido typepara accesorios. En ese caso, si isRequiredha definido el tipo para stringpasar, booleanhaga que la verificación de tipo falle y obtendrá una advertencia de Vue. Para solucionarlo, es posible que desee evitar pasar ese accesorio, así que simplemente coloque el undefinedrespaldo y el accesorio no se enviará acomponent

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

Explicación

¡He pasado por el mismo problema y he probado las soluciones anteriores! Sí, no veo el proppero eso en realidad no cumple con lo requerido aquí.

Mi problema -

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

En el caso anterior, lo que esperaba es que no se haya my-proppasado al componente secundario; <any-conponent/>no veo el propin, DOMpero en mi <any-component/>componente, aparece un error del error de verificación del tipo de prop. Como en el componente hijo, espero my-propser un Stringpero lo es boolean.

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

Lo que significa que el componente hijo recibió el accesorio incluso si lo es false. El ajuste aquí es permitir que el componente secundario tome default-valueel control y también se salte la verificación. ¡ undefinedTrabajos aprobados !

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

Esto funciona y mi accesorio infantil tiene el valor predeterminado.

En uso html

<input :required="condition" />

Y definir en propiedad de datos como

data () {
   return {
      condition: false
   }
}