如何解決vue $refs報錯問題

vue $refs報錯的解決方法：1、開啟對應的程式碼文件，然後加上「this.$nextTick();」；2、在mounted()鉤子函數中呼叫即可。

本教學操作環境：windows7系統、vue2.5.17版，DELL G3電腦。

【相關文章推薦：vue.js】

專案開發中遇到，cannot read property ‘style’ of undefined的問題。我是怎麼解決的，不多說，直接貼程式碼。

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})`;
      });
    });
  }
}

解決方法：

第一種方法：加上this.$nextTick();

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

第二種方法：在mounted ()鉤子函數中呼叫。

mounted() {
  this.getAddBG();
}

調查分析原因：

1、先從vue生命週期與Vue.nextTick()說起。

created()鉤子函數執行的時候DOM並未進行任何渲染，此時無法進行DOM操作。

在Vue生命週期的created()鉤子函數進行DOM操作一定要放在Vue.nextTick()的回呼函數中。

mounted()鉤子函數執行時所有的DOM掛載和渲染都已經完成，此時在該鉤子函數中進行任何DOM操作都不會有問題。

2、Vue官方文件的解釋。

Vue非同步執行DOM更新。只要觀察到資料變化，Vue將開啟一個佇列，並緩衝在同一事件循環中發生的所有資料變更。如果同一個watcher被多次觸發，只會被推入到隊列中一次。這種在緩衝時去除重複資料對於避免不必要的計算和DOM操作上非常重要。然後在下一個事件循環tick中，Vue刷新佇列並執行實際（已去重）工作。 Vue在內部嘗試對非同步佇列使用原生的Promise.then和MessageChannel，如果執行環境不支持，會採用setTimeout(fn, 0)代替。

Vue.nextTick()用來延遲執行一段程式碼。

以上是如何解決vue $refs報錯問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！