vue $refs報錯怎么辦

這篇文章給大家分享的是有關vue $refs報錯怎么辦的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

vue $refs報錯的解決辦法：1、打開相應的代碼文件，然后加上“this.$nextTick();”；2、在mounted()鉤子函數中調用即可。

項目開發中遇到，cannot read property ‘style’ of undefined的問題。我是怎么解決的，不多說，直接貼代碼。

created() {
  this.getAddBG();
},
methods: {
  getAddBG() {
    let config = {
      service: "200017",
      h6Type: "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報錯怎么辦”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！