VueJS adiciona condicionalmente um atributo para um elemento

No VueJS, podemos adicionar ou remover um elemento DOM usando v-if:

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

mas existe uma maneira de adicionar / remover atributos de um elemento dom, por exemplo, para o seguinte definir condicionalmente o atributo obrigatório:

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

por algo semelhante a:

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

Alguma ideia?

Experimentar:

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

Forma mais simples:

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

<input :required="condition">

Você não precisa <input :required="test ? true : false">porque se teste for verdadeiro, você já obterá o requiredatributo, e se teste for falso, você não obterá o atributo. A true : falseparte é redundante, bem assim ...

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

A maneira mais simples de fazer essa ligação, então, é <input :required="condition">

Somente se o teste (ou condição ) puder ser mal interpretado, você precisará fazer outra coisa; nesse caso, o uso de Syed resolve !!o problema.
  <input :required="!!condition">

Você pode passar booleanpor coagir, colocar !!antes da variável.

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

Mas eu gostaria de chamar sua atenção para o seguinte caso em que o componente receptor foi definido typepara adereços. Nesse caso, se isRequiredtiver definido o tipo como sendo stringaprovado boolean, a verificação do tipo de make falha e você receberá o aviso Vue. Para consertar isso, você pode evitar passar pelo suporte, então apenas coloque undefinedfallback e o suporte não será enviado paracomponent

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

Explicação

Eu já passei pelo mesmo problema e tentei as soluções acima !! Sim, não vejo o, propmas isso realmente não cumpre o que é exigido aqui.

Meu problema -

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

No caso acima, o que eu esperava é não ter sido my-proppassado para o componente filho - <any-conponent/>não vejo a entrada prop, DOMmas no meu <any-component/>componente, surge um erro de falha na verificação do tipo de prop. Como no componente filho, espero my-propser um, Stringmas é boolean.

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

O que significa que esse componente filho recebeu o prop, mesmo que seja false. O ajuste aqui é permitir que o componente filho receba o default-valuee também ignore a verificação. undefinedObras aprovadas embora!

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

Isso funciona e meu objeto filho está tendo o valor padrão.

Em uso html

<input :required="condition" />

E definir na propriedade de dados como

data () {
   return {
      condition: false
   }
}