Vue-Bindungsobjekt, Array-Daten können nicht dynamisch gerendert werden – detaillierte Erläuterung

Vue-Bindungsobjekt, Array-Daten können nicht dynamisch gerendert werden – detaillierte Erläuterung

Projektszenario:

Dark Horse Vue Projektmanagement-Praxis, Produktklassifizierung abrufen, Datenattribute auf der Registerkarte der Erweiterungsleiste ändern

Problembeschreibung:

Wenn Sie auf die Registerkarte „+Neues Tag“ klicken, wird ein Eingabefeld angezeigt, in das der Benutzer die hinzuzufügenden Attribute eingeben kann.

Das Ergebnis ist, dass es beim Klicken nicht sofort gerendert werden kann

async getParametersList() {
      diese.cat_id = diese.currentSelect[diese.currentSelect.length - 1];
      const { data: res } = warte darauf.$http.get(
        `Kategorien/${this.cat_id}/Attribute`,
        {
          Parameter: { sel: "viele" }
        }
      );
      dies.paramasData = res.data;
 
      res.data.forEach(item => {
        item.attr_vals = item.attr_vals ? item.attr_vals.split(" ") : [];
        //Steuern Sie die Anzeige und das Ausblenden des Textfelds item.inputVisible=false
        //Der im Textfeld item.inputValue='' eingegebene Wert
        console.log(Element)
      });
      Konsole.log(diese.paramasData);
    },
//Klicken Sie auf die Schaltfläche, um das Dialogfeld anzuzeigen. //Klicken Sie auf die Schaltfläche, um das Texteingabefeld anzuzeigen. showInput(row) {
      Zeile.inputVisible = true
      // Das Textfeld automatisch den Fokus erhalten lassen // Die Funktion der Methode $nextTick besteht darin, den Code in der Rückruffunktion erst anzugeben, nachdem die Elemente auf der Seite erneut gerendert wurden // this.$nextTick((_) => {
      // dies.$refs.saveTagInput.$refs.input.focus()
      // })
    },

Ursachenanalyse:

Lesen Sie diesen Artikel

https://www.jb51.net/article/222379.htm

Es stellte sich heraus, dass ich nach dem Abrufen der Parameterliste den Wert sofort bidirektional gebunden und dann dem Objekt in jeder Spalte das Steuerelementattribut „inputvisible“ hinzugefügt habe. Als die Schaltfläche später angeklickt wurde, konnte das „Inputvisible“ jedes Objekts daher nicht in Echtzeit mit dem „v-if“ im Eingabefeld gerendert werden.

Nach der bidirektionalen Bindung werden die Eigenschaftswerte der Objekte im Array hinzugefügt. Vue hat keine Möglichkeit, die Getter- und Setter-Funktionen für die Objekte zu binden, die anschließend zum Array hinzugefügt werden. Daher besteht keine Möglichkeit, ein Echtzeit-Rendering zu erhalten.

Lösung:

Weisen Sie den Daten nach der Änderung der Daten Werte in den Daten zu.

Im Augenblick

async getParametersList() {
      diese.cat_id = diese.currentSelect[diese.currentSelect.length - 1];
      const { data: res } = warte darauf.$http.get(
        `Kategorien/${this.cat_id}/Attribute`,
        {
          Parameter: { sel: "viele" }
        }
      );
      
 
      res.data.forEach(item => {
        item.attr_vals = item.attr_vals ? item.attr_vals.split(" ") : [];
        //Steuern Sie die Anzeige und das Ausblenden des Textfelds item.inputVisible=false
        //Der im Textfeld item.inputValue='' eingegebene Wert
        console.log(Element)
      });
      dies.paramasData = res.data;
      Konsole.log(diese.paramasData);
    },

Dies ist das Ende dieses Artikels über Vue-Bindungsobjekte. Array-Daten können nicht dynamisch gerendert werden. Weitere verwandte Vue-Bindungsobjekte und Array-Daten können nicht dynamisch gerendert werden. Durchsuchen Sie bitte die vorherigen Artikel von 123WORDPRESS.COM oder stöbern Sie weiter in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Die Vue+elementUI-Komponente implementiert rekursiv eine faltbare, dynamische Rendering-Seitenleistennavigation auf mehreren Ebenen
  • Lösung für das Problem, dass die Quelle von img in Vue beim dynamischen Rendern nicht angezeigt wird
  • Beispiel für dynamisches Rendering der Vue-Navigationsleiste
  • Beispielcode für Vue-Formularbindung (Optionsfeld, Auswahlfeld (Einzelauswahl, Mehrfachauswahl, dynamische Optionen, gerendert mit v-for)
  • Detaillierte Erläuterung der dynamischen Rendering-Komponenten für mehrstufige Menüs von VUE Element-UI

<<:  Detaillierte Analyse und Verwendung des Befehls tcpdump unter Linux

>>:  Beheben Sie schnell die Probleme des falschen Formats, des langsamen Imports und des Datenverlusts beim Importieren von Daten aus MySQL

Artikel empfehlen

Kreativer Eröffnungseffekt durch die Kombination von CSS 3.0 mit Video

Ich möchte Ihnen einen kreativen Einstieg vorstel...

Informationen zum CSS-Floating und zum Aufheben des Floatings

Definition von Float Setzt das Element aus dem no...

So aktualisieren Sie CentOS7 auf CentOS8 (detaillierte Schritte)

Dieser Artikel erläutert anhand eines konkreten B...

2017 neueste Version der Windows-Installation MySQL-Tutorial

1. Laden Sie zunächst die neueste Version von MyS...

Zusammenfassung der HTML-Formatierungsstandards für webbasierte E-Mail-Inhalte

1. Seitenanforderungen 1) Verwenden Sie standardm...

Ein umfassendes Verständnis der funktionalen Komponenten von Vue.js

Inhaltsverzeichnis Vorwort Funktionale React-Komp...

So fügen Sie einem Hintergrundbild in CSS3 eine Farbmaske hinzu

Vor einiger Zeit stieß ich während der Entwicklun...

Zusammenfassung der grundlegenden Verwendung von JS-Arrays

Vorwort Arrays sind eine spezielle Art von Objekt...

Nginx-Weiterleitung basierend auf URL-Parametern

Anwendungsszenarien: Der Sprungpfad muss entsprec...

Auszeichnungssprache - Titel

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

Wie MySQL Milliarden von Datenverkehr unterstützt

Inhaltsverzeichnis 1 Master-Slave-Lese-/Schreibtr...