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

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

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

項(xiàng)目開(kāi)發(fā)中遇到，cannot read property ‘style’ of undefined的問(wèn)題。我是怎么解決的，不多說(shuō)，直接貼代碼。

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()說(shuō)起。

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

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

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

2、Vue官方文檔的解釋。

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

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

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

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

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

廣告

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