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

118

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?

Don Smythe
quelle
4
Obwohl dies nicht so offensichtlich ist (daher die Verwirrung), besagt die Dokumentation tatsächlich, dass, wenn der Attributwert als falsch ausgewertet wird, das Attribut weggelassen wird ( vuejs.org/v2/guide/syntax.html#Attributes )
AlexanderB
Eigentlich sagt die Dokumentation ist das Attribut nicht hinzugefügt werden , wenn „... den Wert hat null, undefinedoder false , die von einem JS - Skript unterschiedlich ist falsch zu bewerten. Dies bedeutet, dass eine leere Zeichenfolge in JavaScript falsch ist, das Attribut jedoch weiterhin zu DOM hinzugefügt wird. Um zu verhindern, dass Sie versuchen könntenv-bind:name="name || false"
Denilson Sá Maia
@AlexanderB Wenn das stimmt, wie kann ich falseüber eine Requisite explizit an die untergeordnete Komponente übergeben?
Bruce Sun
@BruceSun, Wenn das Attribut im Kontext "unbeabsichtigt" verschwindet, wenn Sie ihm einen falschen Wert geben, versuchen Sie, es als Zeichenfolge zu übergeben 'false'. In anderen Fällen, in denen Sie das Vorhandensein eines nicht-booleschen HTML-Attributs für das Element steuern müssen, können Sie das bedingte Rendern v-ifwie hier vorgeschlagen verwenden: github.com/vuejs/vue/issues/7552#issuecomment-361395234
AlexanderB
@AlexanderB Ich denke ich muss mich korrigieren - ich sollte sagen attributeaber NICHT prop. Wir können sicher explizit falseüber eine Komponenteneigenschaft, aber NICHT ein Attribut (das nicht als Eigenschaft erkannt wird) übergeben. Hab ich recht?
Bruce Sun

Antworten:

127

Versuchen:

<input :required="test ? true : false">
Cymruu
quelle
9
Lange Form ist<input v-bind:required="test ? true : false">
Nathanielobrown
8
anythingAtAll : ? true : false(oder if (condition) { return true; } else { return false; }) in jeder Sprache ist ... unpassend . Verwenden Sie einfach return (condition)oder, in diesem Fall,<input :required="test">
Stephen P
5
Wenn Sie sicher sind, dass die Variable testist boolean, können Sie einfach:required="test"
strz
2
Bitte beachten Sie, dass dies von der Komponente abhängt! Es ist möglich , dass , wenn Ihre Eigenschaft akzeptiert StringWert , dass es durch das Setzen falseSie erhalten type checkFehler. Stellen Sie es also auf undefinedfalse ein. docs
Traxo
Wenn Sie verwenden, :required="required"wo requiredsich eine boolesche Komponenteneigenschaft befindet, führt dies für mich zu <el required = "required">
Andrew Castellano
65

Einfachste Form:

<input :required="test">   // if true
<input :required="!test">  // if false
<input :required="!!test"> // test ? true : false
Syed
quelle
1
Bitte beachten Sie, dass dies von der Komponente abhängt! Es ist möglich , dass , wenn Ihre Eigenschaft akzeptiert StringWert , dass es durch das Setzen falseSie erhalten type checkFehler. Stellen Sie es also auf undefinedfalse ein. docs
Traxo
@Syed Ihre Antwort mit doppelten Ausrufezeichen !! Ich habe diese Syntax vor gestern noch nie gesehen und bin bei einer Codeüberprüfung auf Folgendes gestoßen : - <input :required="!!!recipe.checked" v-model="recipe.pieType"><select :required="!!!recipe.checked" v-model="recipe.ingredients" :options="ingredients"></select> Würden Sie wissen, was !!!(3) für einen :requiredWert bedeutet? Vielen Dank.
Chris22
2
@ Chris22 Es gibt keinen Unterschied zwischen! Test und !!! Test, da !!! Test nur !! (! Test) ist und weil! Test ein Boolescher Wert ist, !! (! Test) nur seine doppelte Negation ist, daher der gleich. Überprüfen Sie dies: stackoverflow.com/a/25318045/1292050
Syed
@Syed danke. Nach Ihrem Link habe ich auch diesen gefunden und bin damit einverstanden . : ^)
Chris22
Was @Syed gesagt hat, ist nicht
falsch
16

<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">

Stephen P.
quelle
11

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.

Satyam Pathak
quelle
2

In HTML verwenden

<input :required="condition" />

Und definieren Sie in Dateneigenschaften wie

data () {
   return {
      condition: false
   }
}
Nipun Jain
quelle