VueJS fügt bedingt ein Attribut für ein Element hinzu

In VueJS können wir mit v-if ein DOM-Element hinzufügen oder entfernen:

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

Gibt es jedoch eine Möglichkeit, Attribute eines dom-Elements hinzuzufügen / zu entfernen, z. B. für das folgende bedingte Festlegen des erforderlichen Attributs:

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

von etwas ähnlichem wie:

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

Irgendwelche Ideen?

Versuchen:

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

Einfachste Form:

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

<input :required="condition">

Sie brauchen es nicht, <input :required="test ? true : false">denn wenn der Test wahr ist, erhalten Sie das requiredAttribut bereits, und wenn der Test falsch ist, erhalten Sie das Attribut nicht. Der true : falseTeil ist überflüssig, ähnlich wie dieser ...

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

Der einfachste Weg, diese Bindung durchzuführen, ist also <input :required="condition">

Nur wenn der Test (oder die Bedingung ) falsch interpretiert werden kann, müssen Sie etwas anderes tun. In diesem Fall macht Syeds Verwendung !!den Trick.
  <input :required="!!condition">

Sie können übergeben, booleanindem Sie es erzwingen und !!vor die Variable setzen.

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

Aber ich möchte Ihre Aufmerksamkeit auf den folgenden Fall lenken, in dem die empfangende Komponente typefür Requisiten definiert wurde . In diesem Fall schlägt die Typprüfung fehl , wenn isRequiredder Typ als stringbestanden definiert wurde, booleanund Sie erhalten eine Vue-Warnung. Um dies zu beheben, möchten Sie möglicherweise vermeiden, diese Requisite zu übergeben. Setzen Sie einfach undefinedFallback und die Requisite wird nicht an gesendetcomponent

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

Erläuterung

Ich habe das gleiche Problem durchgemacht und die oben genannten Lösungen ausprobiert !! Ja, ich sehe das nicht, propaber das erfüllt tatsächlich nicht die hier geforderten Anforderungen.

Mein Problem -

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

In dem oben genannten Fall wurde erwartet, dass er nicht my-propan die untergeordnete Komponente übergeben wird. <any-conponent/>Ich sehe das propIn nicht, DOMaber in meiner <any-component/>Komponente tritt ein Fehler auf, der auf einen Fehler beim Überprüfen des Requisitentyps zurückzuführen ist. Wie in der untergeordneten Komponente erwarte ich, dass my-propes eine ist, Stringaber es ist boolean.

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

Dies bedeutet, dass die untergeordnete Komponente die Requisite erhalten hat, auch wenn dies der Fall ist false. Hier können Sie festlegen, dass die untergeordnete Komponente default-valuedie Prüfung übernimmt und diese auch überspringt. Bestanden undefinedfunktioniert aber!

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

Dies funktioniert und meine Kinderstütze hat den Standardwert.

In HTML verwenden

<input :required="condition" />

Und definieren Sie in Dateneigenschaften wie

data () {
   return {
      condition: false
   }
}