vue$refs報錯怎么辦-創(chuàng)新互聯(lián)

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

10年的陽新網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。網(wǎng)絡(luò)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整陽新建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)從事“陽新網(wǎng)站設(shè)計”,“陽新網(wǎng)站推廣”以來，每個客戶項目都認(rèn)真落實執(zhí)行。

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

項目開發(fā)中遇到，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()鉤子函數(shù)中調(diào)用。

mounted() {
  this.getAddBG();
}

調(diào)查分析原因：

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

created()鉤子函數(shù)執(zhí)行的時候DOM并未進行任何渲染，此時不能進行DOM操作。

在Vue生命周期的created()鉤子函數(shù)進行DOM操作一定要放在Vue.nextTick()的回調(diào)函數(shù)中。

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

2、Vue官方文檔的解釋。

Vue異步執(zhí)行DOM更新。只要觀察到數(shù)據(jù)變化，Vue將開啟一個隊列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)改變。如果同一個watcher被多次觸發(fā)，只會被推入到隊列中一次。這種在緩沖時去除重復(fù)數(shù)據(jù)對于避免不必要的計算和DOM操作上非常重要。然后在下一個事件循環(huán)tick中，Vue刷新隊列并執(zhí)行實際（已去重）工作。Vue在內(nèi)部嘗試對異步隊列使用原生的Promise.then和MessageChannel，如果執(zhí)行環(huán)境不支持，會采用setTimeout(fn, 0)代替。

Vue.nextTick()用于延遲執(zhí)行一段代碼。

感謝各位的閱讀！關(guān)于“vue $refs報錯怎么辦”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

分享名稱：vue$refs報錯怎么辦-創(chuàng)新互聯(lián)
文章起源：http://muchs.cn/article24/dsgjje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、虛擬主機、企業(yè)網(wǎng)站制作、網(wǎng)站設(shè)計公司、定制開發(fā)、用戶體驗

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)