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

Galeriefunktion durch natives Js implementiert

Inhaltsverzeichnis Der erste Der Zweite Native Js...

So ändern Sie die Farbe der gesamten Zeile (tr), wenn die Maus in HTML stoppt

Verwenden Sie reines CSS, um die Hintergrundfarbe...

MySQL-langsame Abfrage pt-query-digest Analyse des langsamen Abfrageprotokolls

1. Einleitung pt-query-digest ist ein Tool zum An...

Was muss ich tun, wenn ich einen fehlerhaften MySQL-Befehl abbrechen möchte?

Ich habe einen falschen MySQL-Befehl eingegeben u...

Das WeChat-Applet implementiert die Aufnahmefunktion

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