Comment résoudre le problème de rapport d'erreurs vue $refs

Solution à l'erreur vue $refs : 1. Ouvrez le fichier de code correspondant, puis ajoutez "this.$nextTick();" 2. Appelez-le simplement dans la fonction hook Mounted().

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.5.17, ordinateur DELL G3.

[Recommandations d'articles connexes : vue.js]

Rencontré lors du développement du projet, le problème de l'impossibilité de lire la propriété « style » de non défini a été rencontré. Comment je l'ai résolu, je ne dirai pas grand-chose, je poste simplement le 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})`;
      });
    });
  }
}

Solution :

Première méthode : ajoutez this.$nextTick();

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

Deuxième méthode : in Mounted () appelé dans le hook fonction.

mounted() {
  this.getAddBG();
}

Enquête et analyse des raisons :

1 Commençons par le cycle de vie de vue et Vue.nextTick().

DOM n'est pas rendu lorsque la fonction hook créée() est exécutée et les opérations DOM ne peuvent pas être effectuées pour le moment.

Les opérations DOM effectuées dans la fonction hook créée() du cycle de vie de Vue doivent être placées dans la fonction de rappel de Vue.nextTick().

Lorsque la fonction hook Mounted() est exécutée, tous les montages et rendus DOM sont terminés. À ce stade, il n'y aura aucun problème pour effectuer des opérations DOM dans la fonction hook.

2. Explication de la documentation officielle de Vue.

Vue effectue les mises à jour du DOM de manière asynchrone. Tant que des modifications de données sont observées, Vue ouvrira une file d'attente et mettra en mémoire tampon toutes les modifications de données qui se produisent dans la même boucle d'événements. Si le même observateur est déclenché plusieurs fois, il ne sera placé dans la file d'attente qu'une seule fois. Cette déduplication lors de la mise en mémoire tampon est très importante pour éviter les calculs et opérations DOM inutiles. Ensuite, lors du prochain tick de boucle d'événement, Vue vide la file d'attente et effectue le travail réel (dédupliqué). Vue essaie en interne d'utiliser Promise.then et MessageChannel natifs pour les files d'attente asynchrones. Si l'environnement d'exécution ne le prend pas en charge, setTimeout(fn, 0) sera utilisé à la place.

Vue.nextTick() est utilisé pour retarder l'exécution d'un morceau de code.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!