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?
javascript
vue.js
vuejs2
Don Smythe
quelle
quelle
null
,undefined
oderfalse
“ , 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"
false
über eine Requisite explizit an die untergeordnete Komponente ü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 Rendernv-if
wie hier vorgeschlagen verwenden: github.com/vuejs/vue/issues/7552#issuecomment-361395234attribute
aber NICHTprop
. Wir können sicher explizitfalse
über eine Komponenteneigenschaft, aber NICHT ein Attribut (das nicht als Eigenschaft erkannt wird) übergeben. Hab ich recht?Antworten:
Versuchen:
quelle
<input v-bind:required="test ? true : false">
anythingAtAll : ? true : false
(oderif (condition) { return true; } else { return false; }
) in jeder Sprache ist ... unpassend . Verwenden Sie einfachreturn (condition)
oder, in diesem Fall,<input :required="test">
test
istboolean
, können Sie einfach:required="test"
String
Wert , dass es durch das Setzenfalse
Sie erhaltentype check
Fehler. Stellen Sie es also aufundefined
false ein. docs:required="required"
worequired
sich eine boolesche Komponenteneigenschaft befindet, führt dies für mich zu <el required = "required">Einfachste Form:
quelle
String
Wert , dass es durch das Setzenfalse
Sie erhaltentype check
Fehler. Stellen Sie es also aufundefined
false ein. docs!!
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:required
Wert bedeutet? Vielen Dank.<input :required="condition">
Sie brauchen es nicht,
<input :required="test ? true : false">
denn wenn der Test wahr ist, erhalten Sie dasrequired
Attribut bereits, und wenn der Test falsch ist, erhalten Sie das Attribut nicht. Dertrue : false
Teil ist überflüssig, ähnlich wie dieser ...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">
quelle
Sie können übergeben,
boolean
indem Sie es erzwingen und!!
vor die Variable setzen.Aber ich möchte Ihre Aufmerksamkeit auf den folgenden Fall lenken, in dem die empfangende Komponente
type
für Requisiten definiert wurde . In diesem Fall schlägt die Typprüfung fehl , wennisRequired
der Typ alsstring
bestanden definiert wurde,boolean
und Sie erhalten eine Vue-Warnung. Um dies zu beheben, möchten Sie möglicherweise vermeiden, diese Requisite zu übergeben. Setzen Sie einfachundefined
Fallback und die Requisite wird nicht an gesendetcomponent
Erläuterung
Ich habe das gleiche Problem durchgemacht und die oben genannten Lösungen ausprobiert !! Ja, ich sehe das nicht,
prop
aber das erfüllt tatsächlich nicht die hier geforderten Anforderungen.Mein Problem -
In dem oben genannten Fall wurde erwartet, dass er nicht
my-prop
an die untergeordnete Komponente übergeben wird.<any-conponent/>
Ich sehe dasprop
In nicht,DOM
aber 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, dassmy-prop
es eine ist,String
aber es istboolean
.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 Komponentedefault-value
die Prüfung übernimmt und diese auch überspringt. Bestandenundefined
funktioniert aber!Dies funktioniert und meine Kinderstütze hat den Standardwert.
quelle
In HTML verwenden
Und definieren Sie in Dateneigenschaften wie
quelle