Ich habe zufällig festgestellt, dass Vue.$set im Projekt ungültig warEs besteht die Anforderung, eine Datenfilterung hinzuzufügen. Die linke Seite ist die Steuerelementauswahl, die Mitte ist die Bedingung und die rechte Seite ist der Wert. Da je nach Steuerelement unterschiedliche Wertoptionen angezeigt werden <el-form inline> <el-form-item style="margin-bottom: 20px;"> <el-select v-model="data[props.prop]" @change="data[props.value] = ''"> <el-Option v-for="Element in Steuerelementen" :Schlüssel="Artikel-ID" :Wert="Artikel-ID" :label="Artikel.label"> </el-Option> </el-Auswahl> </el-form-item> <el-form-item style="margin-bottom: 20px;"> <el-select v-model="Daten[Eigenschaften.Typ]"> <el-Option v-for="Artikel in gutem Zustand" :Schlüssel="Artikel.Code" :Wert="Artikel.Code" :label="Artikelname" ></el-Option> </el-Auswahl> </el-form-item> <el-form-item style="margin-bottom: 20px;"> <FormControl v-if="Steuerung" :Steuerung="Steuerung" :Wert="Daten[Eigenschaften.Wert]" @input="beiWertänderung" ></FormControl> <el-input v-else :value="data[props.value]" @input="onValueChange"></el-input> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-plus" @click="hinzufügen"></el-button> </el-form-item> </el-form> { Requisiten:{ Requisiten: { Typ: Objekt, Standard: () => ({ Stütze: 'Stütze', Wert: 'Wert', Typ: "Typ" }) } }, Daten(){ zurückkehren { Daten:{ } } }, Methoden:{ beiWertänderung(Wert){ dies.$set(diese.Daten, diese.Eigenschaften.Wert, Wert) } } //... } CodeausschnittAufgrund der Unsicherheit der Steuer-ID können nicht alle Daten im Voraus mit einem Schlüssel voreingestellt werden, sodass eine Antwort natürlich nicht möglich ist. Daher wird this.$set in onValueChange verwendet, um dynamisch Daten hinzuzufügen und eine Antwort zu erzielen. Bei der Reproduktion kann festgestellt werden, dass die Daten im Werteingabefeld nicht in Echtzeit reagieren können Ich habe $set verwendet, aber es reagierte nicht. Nach einigen Untersuchungen stellte ich fest, dass der Wert nach dem Umschalten der Steuerung nicht reagierte. Solange ich jedoch vor dem Umschalten etwas eingebe und dann umschalte, gibt es kein Problem. Nach einer weiteren Untersuchung fanden wir <el-select v-model="data[props.prop]" @change="data[props.value] = ''"> Das Problem ist nach dem Löschen des @change-Ereignisses gelöst Das Problem tritt auf, wenn data[props.value] = '' Überprüfen Sie also den Vue-Quellcode //vue/src/core/observer/index.js Quellcode-Ausschnitt/** * Eine Eigenschaft für ein Objekt festlegen. Fügt die neue Eigenschaft hinzu und * löst eine Änderungsbenachrichtigung aus, wenn die Eigenschaft nicht * existiert bereits. */ Exportfunktionssatz (Ziel: Array<beliebig> | Objekt, Schlüssel: beliebig, Wert: beliebig): beliebig { wenn (Prozess.env.NODE_ENV !== 'Produktion' && (istUndef(Ziel) || istPrimitive(Ziel)) ) { warnen(`Reaktive Eigenschaft kann nicht auf undefinierten, Null- oder primitiven Wert gesetzt werden: ${(target: any)}`) } wenn (Array.isArray(Ziel) && isValidArrayIndex(Schlüssel)) { Ziellänge = Math.max(Ziellänge, Schlüssel) Ziel.splice(Schlüssel, 1, Wert) Rückgabewert } if (Schlüssel in Ziel && !(Schlüssel in Objekt.Prototyp)) { Ziel[Schlüssel] = Wert Rückgabewert } const ob = (Ziel: beliebig).__ob__ if (target._isVue || (ob && ob.vmCount)) { process.env.NODE_ENV !== 'Produktion' && warn( 'Vermeiden Sie das Hinzufügen reaktiver Eigenschaften zu einer Vue-Instanz oder ihren Stamm-$data' + „Zur Laufzeit – deklarieren Sie es im Voraus in der Datenoption.“ ) Rückgabewert } wenn (!ob) { Ziel[Schlüssel] = Wert Rückgabewert } defineReactive(ob.value, Schlüssel, Wert) ob.dep.notify() Rückgabewert } Es ist ersichtlich, dass vor defineReactive ermittelt wird, ob der Schlüssel im Objekt vorhanden ist. Wenn er vorhanden ist, wird er übersprungen. Hier liegt die Falle. Ich habe das Vue.$set-Dokument viele Male gelesen und nicht gefunden, dass $set vorhandenen Schlüsseln keine Überwachungsobjekte hinzufügen kann. Löschen Sie data[props.value] = '' und ändern Sie es in onValueChange(''), um das Problem perfekt zu lösen ZusammenfassenVor Vue.$set darf der Schlüssel nicht im Objekt vorhanden sein, sonst wird nur der Wert aktualisiert und keine Antwortüberwachung für den Schlüssel hinzugefügt. Das Obige ist meine persönliche Erfahrung. Ich hoffe, es kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden. Das könnte Sie auch interessieren:
|
<<: Vier Modi zum Öffnen und Schließen von Oracle
>>: Übersicht über die Unterschiede zwischen Linux TTY/PTS
Der gesamte Inhalt dieses Blogs ist unter Creativ...
Inhaltsverzeichnis Anwendungsszenario Ideen Proje...
In diesem Artikel wird der spezifische Code für J...
Vorwort Ich glaube, jeder weiß, dass Indizes geor...
Code kopieren Der Code lautet wie folgt: 1. Sina ...
html <!DOCTYPE html> <html lang="de...
Überblick Der Lastenausgleich von Nginx bietet Up...
Inhaltsverzeichnis Vorwort: Verschlüsselungsalgor...
Discuz! Forum verfügt über zahlreiche Konfiguratio...
Was sind Slots? Wir wissen, dass in Vue nichts in...
Inhaltsverzeichnis Zusammenfassen <Vorlage>...
MVCC MVCC (Multi-Version Concurrency Control) ist...
1. <body>-Tag: Wird verwendet, um den Haupt...
Inhaltsverzeichnis Was ist Abflachung? Rekursion ...
MySQL 5.7-Version: Methode 1: Verwenden Sie den B...