Erkennung und Lösung von Vue.$set-Fehlerfallen

Erkennung und Lösung von Vue.$set-Fehlerfallen

Ich habe zufällig festgestellt, dass Vue.$set im Projekt ungültig war

Es 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)
    }
  }
  //...
}

Codeausschnitt

Aufgrund 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

Zusammenfassen

Vor 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:
  • Fallstudie zur dynamischen Datenbindung von this.$set in Vue
  • Vue – Behebung des Fehlers. Der berechneten Eigenschaft „****“ wurde zwar ein Setter zugewiesen, sie verfügt jedoch nicht über diesen.
  • Verwendung des Setups in vue3.0 (zwei Verwendungsmöglichkeiten)
  • Eine kurze Diskussion über die Vorsichtsmaßnahmen bei der Verwendung von resetFields() in Vue
  • Detaillierte Erläuterung des Quellcodes der vue.$set()-Methode von Vue

<<:  Vier Modi zum Öffnen und Schließen von Oracle

>>:  Übersicht über die Unterschiede zwischen Linux TTY/PTS

Artikel empfehlen

Informieren Sie sich, wie HTML und Ressourcen geladen werden

Der gesamte Inhalt dieses Blogs ist unter Creativ...

Ein auf Vue-cli basierender Codesatz unterstützt mehrere Projekte

Inhaltsverzeichnis Anwendungsszenario Ideen Proje...

JavaScript-Implementierung des Verifizierungscode-Falls

In diesem Artikel wird der spezifische Code für J...

Absteigender Index in MySQL 8.0

Vorwort Ich glaube, jeder weiß, dass Indizes geor...

Nginx-Lastausgleichsalgorithmus und Failover-Analyse

Überblick Der Lastenausgleich von Nginx bietet Up...

Schritte zum Einrichten einer HTTPS-Website basierend auf Nginx

Inhaltsverzeichnis Vorwort: Verschlüsselungsalgor...

So fügen Sie Konfigurationsoptionen zum Discuz!-Forum hinzu

Discuz! Forum verfügt über zahlreiche Konfiguratio...

Detaillierte Analyse der Verwendungs- und Anwendungsszenarien von Slots in Vue

Was sind Slots? Wir wissen, dass in Vue nichts in...

Detaillierte Untersuchung der MySQL-Mehrversions-Parallelitätskontrolle MVCC

MVCC MVCC (Multi-Version Concurrency Control) ist...

Detaillierte Erklärung zur JavaScript-Datenabflachung

Inhaltsverzeichnis Was ist Abflachung? Rekursion ...

Zusammenfassung zum Ändern des Root-Passworts in MySQL 5.7 und MySQL 8.0

MySQL 5.7-Version: Methode 1: Verwenden Sie den B...