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

Question 1

In VueJS können wir 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 / zu entfernen, z. B. für das folgende bedingte Setzen des erforderlichen Attributs:

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

durch etwas Ähnliches wie:

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

Irgendwelche Ideen?

Question 2

Versuchen:

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

Update: Es hat sich in Vue 3 geändert, siehe diese Antwort https://stackoverflow.com/a/64598898

Question 3

Einfachste Form:

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

Question 4

Bedingte Darstellung von Attributen in Vue 3 geändert. Um eine Attributverwendung wegzulassen null oder undefined.

Ansicht 2:

<div :attr="false">
Result: <div>

<div :attr="null">
Result: <div>

Ansicht 3:

<div :attr="false">
Result: <div attr="false">

<div :attr="null">
Result: <div>

Question 5

<input :required="condition">

Du brauchst nicht <input :required="test ? true : false"> weil wenn Prüfung ist Wahrheit die bekommst du schon required Attribut, und wenn Prüfung ist falsch Sie erhalten das Attribut nicht. Das true : false Teil ist überflüssig, so ähnlich …

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 dann <input :required="condition">

Nur wenn die Prüfung (oder Bedingung) kann falsch interpretiert werden, müssten Sie etwas anderes tun; in diesem Fall Syeds Verwendung von !! macht den Trick.
<input :required="!!condition">

Question 6

Du kannst passieren boolean durch Zwang, setzen !! vor der Variable.

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 definiert hat type für Requisiten. In diesem Fall, wenn isRequired hat den zu seinden Typ definiert string dann vorbei boolean make it type check schlägt fehl und Sie erhalten eine Vue-Warnung. Um dies zu beheben, möchten Sie möglicherweise vermeiden, diese Stütze zu passieren, also setzen Sie einfach undefined Fallback und die Stütze wird nicht gesendet component

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 die nicht prop aber das erfüllt eigentlich nicht das, was hier gefordert wird.

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 ich es habe my-prop an die untergeordnete Komponente übergeben werden – <any-conponent/> Ich sehe die nicht prop in DOM aber in meinem <any-component/> Komponente, erscheint ein Fehler bei einem Fehler bei der Überprüfung des Prop-Typs. Wie in der untergeordneten Komponente erwarte ich my-prop ein … zu sein String aber es ist boolean.

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

Dies bedeutet, dass die untergeordnete Komponente die Requisite erhalten hat, selbst wenn dies der Fall ist false. Optimieren Sie hier, um die untergeordnete Komponente übernehmen zu lassen default-value und überspringen Sie auch die Prüfung. Bestanden undefined funktioniert aber!

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

Dies funktioniert und meine untergeordnete Prop hat den Standardwert.

Question 7

Es ist bemerkenswert zu verstehen, dass Sie, wenn Sie Attribute bedingt hinzufügen möchten, auch eine dynamische Deklaration hinzufügen können:

<input v-bind="attrs" />

wobei attrs als Objekt deklariert ist:

data() {
    return {
        attrs: {
            required: true,
            type: "text"
        }
    }
}

Was dazu führen wird:

<input required type="text"/>

Ideal in Fällen mit mehreren Attributen.

Question 8

Sie können einen Doppelpunkt vor dem Attribut hinzufügen (kann auch Bedingungen verwenden) wie

<div :class="current? 'active': '' " > 
<button :disabled="InvalidForm? true : false " >

Wenn Sie einen dynamischen Wert wie Requisiten festlegen möchten, können Sie auch einen Doppelpunkt vor dem Attributnamen verwenden, z.

<Child :data="userList" />