So lösen Sie das Vue $refs-Fehlerberichtsproblem

Vue $refs-Fehlerberichtslösung: 1. Öffnen Sie die entsprechende Codedatei und fügen Sie dann „this.$nextTick();“ hinzu. 2. Rufen Sie es einfach in der Mounted()-Hook-Funktion auf.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.5.17, DELL G3-Computer.

【Empfohlene verwandte Artikel: vue.js】

Ich bin während der Projektentwicklung auf das Problem gestoßen, dass die Eigenschaft „Stil“ von undefiniert nicht gelesen werden kann. Wie ich es gelöst habe, verrate ich nicht viel, poste einfach den Code.

created() {
  this.getAddBG();
},
methods: {
  getAddBG() {
    let config = {
      service: "200017",
      h5Type: "activity"
    };
    this.$http.featchH5Post(config).then(res => {
      let list = res.data.data.advertiseList;
      list.forEach(item => {
        this.$refs[
          item.name
        ].style.backgroundImage = `url(${item.defaultPicture})`;
      });
    });
  }
}

Lösung:

Erste Methode: Fügen Sie dies hinzu.$nextTick();

created() {
  this.$nextTick(() => {
    this.getAddBG();
  });
}

Zweite Methode: Rufen Sie die Hook-Funktion mount() auf.

mounted() {
  this.getAddBG();
}

Untersuchung und Analyse der Gründe:

1. Beginnen wir mit dem Vue-Lebenszyklus und Vue.nextTick().

Das DOM wird nicht gerendert, wenn die Hook-Funktion „created()“ ausgeführt wird, und DOM-Vorgänge können derzeit nicht ausgeführt werden.

DOM-Operationen, die in der Hook-Funktion „created()“ des Vue-Lebenszyklus ausgeführt werden, müssen in der Rückruffunktion von Vue.nextTick() platziert werden.

Wenn die Mounted()-Hook-Funktion ausgeführt wird, sind alle DOM-Mounting- und -Rendering-Vorgänge abgeschlossen. Zu diesem Zeitpunkt treten keine Probleme bei der Ausführung von DOM-Vorgängen in der Hook-Funktion auf.

2. Erläuterung der offiziellen Vue-Dokumentation.

Vue führt DOM-Updates asynchron durch. Solange Datenänderungen beobachtet werden, öffnet Vue eine Warteschlange und puffert alle Datenänderungen, die in derselben Ereignisschleife auftreten. Wenn derselbe Watcher mehrmals ausgelöst wird, wird er nur einmal in die Warteschlange verschoben. Diese Deduplizierung der Daten während der Pufferung ist sehr wichtig, um unnötige Berechnungen und DOM-Operationen zu vermeiden. Dann leert Vue im nächsten Ereignisschleifen-Tick die Warteschlange und führt die eigentliche (deduplizierte) Arbeit aus. Vue versucht intern, natives Promise.then und MessageChannel für asynchrone Warteschlangen zu verwenden. Wenn die Ausführungsumgebung dies nicht unterstützt, wird stattdessen setTimeout(fn, 0) verwendet.

Vue.nextTick() wird verwendet, um die Ausführung eines Codeabschnitts zu verzögern.

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Vue $refs-Fehlerberichtsproblem. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!