How to solve vue $refs error reporting problem

Vue $refs error solution: 1. Open the corresponding code file, and then add "this.$nextTick();"; 2. Just call it in the mounted() hook function.

The operating environment of this tutorial: windows7 system, vue version 2.5.17, DELL G3 computer.

[Recommended related articles: vue.js]

The problem encountered during project development is that cannot read property ‘style’ of undefined. How I solved it, I won’t say much, just post the 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:

First method: add this.$nextTick();

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

Second method: in mounted () called in the hook function.

mounted() {
  this.getAddBG();
}

Investigation and analysis of the reasons:

1. Let’s start with the vue life cycle and Vue.nextTick().

The DOM is not rendered when the created() hook function is executed, and DOM operations cannot be performed at this time.

DOM operations performed in the created() hook function of the Vue life cycle must be placed in the callback function of Vue.nextTick().

When the mounted() hook function is executed, all DOM mounting and rendering have been completed. At this time, there will be no problem in performing any DOM operations in the hook function.

2. Explanation of Vue official documentation.

Vue performs DOM updates asynchronously. As long as data changes are observed, Vue will open a queue and buffer all data changes that occur in the same event loop. If the same watcher is triggered multiple times, it will only be pushed into the queue once. This deduplication during buffering is very important to avoid unnecessary calculations and DOM operations. Then in the next event loop tick, Vue flushes the queue and performs the actual (deduplicated) work. Vue internally tries to use native Promise.then and MessageChannel for asynchronous queues. If the execution environment does not support it, setTimeout(fn, 0) will be used instead.

Vue.nextTick() is used to delay the execution of a piece of code.

The above is the detailed content of How to solve vue $refs error reporting problem. For more information, please follow other related articles on the PHP Chinese website!