Lösung für das Problem, dass Vue-Binding-Objekte und Array-Variablen nach der Änderung nicht gerendert werden können

Projektszenario:

Auf der Seitenanzeige befindet sich ein <ul>-Tag. Wir müssen die Listendaten dynamisch anzeigen. Neben den Listenwerten müssen auf unserer Seite noch weitere Werte angezeigt werden. Daher ist die Datenstruktur der Listendaten ein Array unter einem Objekt. Nach der dynamischen Änderung der Daten wird festgestellt, dass sie nicht automatisch gerendert werden.

Problembeschreibung:

Wenn Sie auf die Schaltfläche „Klick mich!“ klicken, ändern sich die Daten und werden an die Konsole ausgegeben, die Listendaten werden jedoch nicht gerendert.
Der Code lautet wie folgt:

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <button @click="pushDataToDataList">klick mich!</button>
  <ul>
    <li v-for="(Element, i) in form.dataList" :key="Element">
      {{ i + ":" + Artikel }}
    </li>
  </ul>
</div>
<Skript>
  let app = neues Vue({
    Daten: Funktion() {
      zurückkehren {
        bilden: {}
      }
    },
    Methoden: {
      pushDataToDataList() {
        wenn (diese.form.dataList == null) {
          dieses.Formular.Datenliste = []
        }
        this.form.dataList.push("abc" + this.form.dataList.length)
        Konsole.log(dieses.Formular.Datenliste)
      }
  }
  }).$mount('#app')
</Skript>

Ursachenanalyse:

Nach Durchsicht der offiziellen Dokumentation fanden wir die folgende Passage

Aufgrund von Einschränkungen von JavaScript kann Vue keine Änderungen in Arrays und Objekten erkennen. Es gibt jedoch Möglichkeiten, diese Einschränkungen zu umgehen und die Reaktionsfähigkeit dennoch aufrechtzuerhalten.

1. Für Objekte: Vue kann das Hinzufügen oder Entfernen von Eigenschaften nicht erkennen. Da Vue beim Initialisieren der Instanz eine Getter/Setter-Konvertierung für die Eigenschaft durchführt, muss die Eigenschaft im data vorhanden sein, damit Vue sie in „responsive“ konvertieren kann.
2. Für Arrays: Vue kann keine Änderungen an den folgenden Arrays erkennen:

• Wenn Sie ein Array-Element direkt über seinen Index festlegen, zum Beispiel: vm.items[indexOfItem] = newValue
• Wenn Sie die Länge eines Arrays ändern, zum Beispiel: vm.items.length = newLength

Der Grund ist hier klar. Unsere Daten werden nicht gerendert, da zu Beginn im Formular unter Daten kein dataList Attribut vorhanden ist. Daher kann Vue die Änderung nicht erkennen, selbst wenn sich der Wert später ändert. Und das gilt nicht nur für Arrays, sondern auch für JS-Objekte. Darüber hinaus wird durch das direkte Ändern der Elemente des Arrays durch Drücken des Index keine Ansichtsdarstellung ausgelöst .
Die folgenden Array-Methoden lösen das Rendern des Arrays aus:

• push(element) // Füge ein Element am Ende des Arrays hinzu
• pop() // entferne das letzte Element des Arrays und gib es zurück
• shift() // entferne das erste Element eines Arrays und gib es zurück
• unshift(ele1, ele2, …, eleN) // Füge ein oder mehrere Elemente am Anfang des Arrays hinzu und gib die neue Länge zurück
• splice(start, deleteCount?, …item) // Lösche ein Element in einem Array und ersetze es durch ein neues Element
• sort() // Sortiert das Array und ändert die Position der Array-Elemente
• reverse() // Das Umkehren von Array-Elementen ändert die Position der Array-Elemente

Lösung:

1. Legen Sie im Formularobjekt unter „Daten“ dataList fest. Da das Front-End die Struktur des Codes bei der Verarbeitung der Daten kennt, erleichtert das vorherige Einrichten auch die nachfolgende Entwicklung und das Verständnis.建議使用

Daten: Funktion() {
  zurückkehren {
    bilden: {
      Datenliste: null
    }
  }
}

2. Verwenden Sie die Methode this.$set()

pushDataToDataList() {
  wenn (diese.form.dataList == null) {
    // Legen Sie zuerst die dataList-Eigenschaft unter der Form this.$set(this.form, 'dataList', []) fest.
  }
  this.form.dataList.push("abc" + this.form.dataList.length)
  Konsole.log(dieses.Formular.Datenliste)
}

Referenzlinks

Hinweise zur Erkennung von Datenänderungen durch Vue

Dies ist das Ende dieses Artikels zur Lösung des Problems, dass Vue-gebundene Objekte und Array-Variablen nach Änderungen nicht gerendert werden können. Weitere verwandte Inhalte zum Problem, dass Vue-gebundene Objekte und Array-Variablen nach Änderungen nicht gerendert werden können, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM in Zukunft unterstützen!