it-swarm.com.de

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

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

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

aber gibt es eine Möglichkeit, Attribute eines Dom-Elements hinzuzufügen oder zu entfernen, z. B. für das folgende Attribut das erforderliche Attribut bedingt:

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

von etwas ähnlich wie:

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

Irgendwelche Ideen?

50
Don Smythe

Versuchen:

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

Einfachste Form:

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

<input :required="condition">

Sie brauchen <input :required="test ? true : false"> nicht, denn wenn test ist truthy, erhalten Sie bereits das required-Attribut und wenn test ist falsy, erhalten Sie das Attribut nicht. Der true : false-Teil ist redundant, ähnlich wie hier ...

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 für diese Bindung ist also <input :required="condition">

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

9
Stephen P

Ich habe das gleiche Problem durchgemacht und habe die obigen Lösungen ausprobiert !! Ja, ich sehe die prop nicht, aber das erfüllt wirklich nicht, was hier erforderlich ist.

Mein Problem -

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

Im obigen Fall habe ich nicht erwartet, dass my-prop an die untergeordnete Komponente übergeben wird - <any-conponent/> Ich sehe die prop nicht in DOM, aber in meiner <any-component/>-Komponente erscheint ein Fehler Fehler bei der Prüfung der Propellerart. Wie in der untergeordneten Komponente erwarte ich, dass my-prop eine String ist, aber es ist boolean.

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

Dies bedeutet, dass die untergeordnete Komponente die Requisite erhalten hat, auch wenn sie false ist. Tweak hier ist, lassen Sie die untergeordnete Komponente default-value nehmen und die Überprüfung überspringen. Bestanden undefined funktioniert aber!

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

Dies funktioniert und meine Kindstütze hat den Standardwert.

0
Satyam Pathak