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

So sortieren Sie eine Zeile oder Spalte in MySQL

Verfahren: Nach Beschreibung: Beides kann nicht e...

Erstellen Sie in 5 Minuten einen WebRTC-Videochat

Im vorherigen Artikel habe ich den detaillierten ...

So verwenden Sie js, um festzustellen, ob eine Datei UTF-8-codiert ist

Konventionelle Lösung Verwenden Sie FileReader, u...

Wissen Sie, warum Vue-Daten eine Funktion sind?

Erklärung auf der offiziellen Website: Wenn eine ...

Mounten Sie die Festplatte in einem Verzeichnis unter Ubuntu 18.04

Einführung In diesem Artikel wird beschrieben, wi...

HTML implementiert problemlos abgerundete Rechtecke

Frage: Wie erreiche ich mit Div+CSS und Positioni...

MySQL 8.0.11 Installations-Tutorial unter Windows

Dieser Artikel zeichnet das Installationstutorial...

Häufig verwendete HTML-Format-Tags_Powernode Java Academy

1. Titel HTML definiert sechs <h>-Tags: <...

3 Codes zur automatischen Aktualisierung von Webseiten

Tatsächlich ist es sehr einfach, diesen Effekt zu ...

Aufzeichnungen zur Verwendung von SSH-Befehlen unter Windows 8

1. Öffnen Sie die virtuelle Maschine und das Git-...

JS-Dekorationsmuster und TypeScript-Dekoratoren

Inhaltsverzeichnis Einführung in das Decorator-Mu...