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

MySQL 5.7 Installations- und Konfigurations-Tutorial unter CentOS7 64 Bit

Installationsumgebung: CentOS7 64-Bit-Mini-Versio...

Installation und Verwendung von MySQL unter Ubuntu (allgemeine Version)

Unabhängig von der verwendeten Ubuntu-Version ist...

Auszeichnungssprache - Bildersetzung

Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“...

Detaillierte Erklärung generischer Fälle in TypeScript

Definition von Generika // Anforderung 1: Generik...

Linux: Fünf-Schritte-Kernel-Build-Baum

Inhaltsverzeichnis 0. Der mit dem System geliefer...

So verwenden Sie Anti-Shake und Throttling in Vue

Inhaltsverzeichnis Vorwort Konzept Stabilisierung...

Überblick und Einführung in das Linux-Betriebssystem

Inhaltsverzeichnis 1. Was ist ein Betriebssystem?...

Eingabedatei zur benutzerdefinierten Schaltflächenverschönerung (Demo)

Ich habe schon einmal einen solchen Artikel gesch...

So verwenden Sie einen Docker-Container für den Zugriff auf das Host-Netzwerk

Vor Kurzem wurde ein System bereitgestellt, das n...

CocosCreator - modulares Lernskript

Modulares Cocos Creator-Skript Mit Cocos Creator ...