VueJS aggiunge in modo condizionale un attributo per un elemento

In VueJS possiamo aggiungere o rimuovere un elemento DOM usando v-if:

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

ma c'è un modo per aggiungere / rimuovere attributi di un elemento dom, ad esempio per quanto segue imposta in modo condizionale l'attributo richiesto:

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

da qualcosa di simile a:

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

Qualche idea?

Provare:

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

La forma più semplice:

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

<input :required="condition">

Non è necessario <input :required="test ? true : false">perché se test è vero otterrai già l' requiredattributo, e se test è falso non otterrai l'attributo. La true : falseparte è ridondante, proprio come questa ...

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

Il modo più semplice per eseguire questa associazione, quindi, è <input :required="condition">

Solo se il test (o la condizione ) può essere interpretato male, dovresti fare qualcos'altro; in quel caso l'uso di Syed !!fa il trucco.
  <input :required="!!condition">

Puoi passare booleanforzandolo, anteponendo !!la variabile.

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

Ma vorrei attirare la vostra attenzione per il seguente caso in cui il componente ricevente ha definito typeper gli oggetti di scena. In tal caso, se isRequiredha definito il tipo da stringpassare boolean, il controllo del tipo fallisce e riceverai un avviso di Vue. Per risolvere il problema potresti voler evitare di passare quell'elica, quindi metti il undefinedfallback e l'elica non verrà inviata acomponent

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

Spiegazione

Ho riscontrato lo stesso problema e ho provato le soluzioni precedenti !! Sì, non vedo il propma in realtà non soddisfa quanto richiesto qui.

Il mio problema -

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

Nel caso precedente, quello che mi aspettavo non sarebbe stato my-proppassato al componente figlio <any-conponent/>: non vedo l' propinput DOMma nel mio <any-component/>componente, viene visualizzato un errore per il fallimento del controllo del tipo di prop. Come nel componente figlio, mi aspetto my-propdi essere a Stringma lo è boolean.

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

Il che significa che il componente figlio ha ricevuto il sostegno anche se lo è false. Il tweak qui è lasciare che il componente figlio prenda il controllo default-valuee salti anche il controllo. undefinedLavori passati però!

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

Funziona e il mio bambino prop sta avendo il valore predefinito.

In html utilizzare

<input :required="condition" />

E definire nella proprietà dei dati come

data () {
   return {
      condition: false
   }
}