vue異步加載dom元素之后無法獲得如何解決

這篇文章主要介紹“vue異步加載dom元素之后無法獲得如何解決”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vue異步加載dom元素之后無法獲得如何解決”文章能幫助大家解決問題。

vue異步加載dom元素后無法獲得

vue存在大量的異步加載問題，比如動態創建dom元素，若你緊接著去獲取創建的dom元素是獲取不到的。

解決辦法

第一種辦法比較low，使用setTimeout方法，讓獲取dom的代碼在動態創建元素之后一段時間(這個時間非常的短)去執行。但這種方法應該是存在風險的，不推薦。

第二種辦法 在將要執行的代碼上套一層 this.$nextTick()

例如：

this.$nextTick(function() {
        let grids = _that.$refs.datamessage;
        console.log(grids);
        for (let i = 0; i < grids.length; i++) {
          let xb = grids[i].getAttribute("index");
          //alert(xb);
          if (_that.value.indexOf(xb) != -1) {
            grids[i].setAttribute("ifSelect", "true");
            grids[i].style.backgroundColor = "#b3d8ff";
            grids[i].style.color = "#409eff";
          }
        }
      });

vue穩健的獲取dom元素

1、獲取Element的彈框中的Dom元素

**由于彈框由v-if控制，在初始頁面渲染的時候，并不存在該Dom元素，所以在mounted中，獲取不到該彈框的Dom元素，無法添加原生時間，如下拉加載**

下面提供穩健的獲取彈框Dom元素的方法，

首先，由于彈框是由v-if判斷，則可以在watch中監聽v-if所對應的變量，在為true時，則彈框打開，此時去獲取DOM元素，發現仍然獲取不到。。。。

此時，需要將獲取事件轉為異步執行，即寫在setTimeout中，即可。穩健一些，可以在nextTck中寫出。    

（仍舊會存在問題）

若在Element提供的彈框回調中（彈框打開動畫結束），則可以保證取到

<el-dialog
      :visible.sync="dialogVisible"
      ref="dialog"
      @opened="dialogOpened"
    >

  dialogOpened() {
      this.$nextTick(() => {
        setTimeout(() => {
          let scrollContent = document.getElementById("scrollContent");
          if (scrollContent) {
            scrollContent.addEventListener("scroll", this.onScroll);
            console.log("獲取到滾動節點----");
          } else {
            console.log("未獲取到滾動節點====");
          }
        });
      });
    }

2、如果以上方法均無法解決

因為可能數據是異步獲取而后填入DOM中，則可以在更新函數中進行獲取DOM的操作，但此時，需要加很多限制，因為無法限制由誰引起的更新！需要標志位減少獲取次數。

可以通過在watch監聽函數中，進行標志位的更改。

有此想法的前提，是在給element UI 彈框中，嵌套了標簽頁 ，在每次切換標簽頁的過程中，DOM都會銷毀，所以對DOM獲取時機的把握比較關鍵，而根據標簽頁中的數據是否渲染完畢后，去獲取改DOM容器，可以說是相當穩健。

無法獲取Element彈窗內嵌套的組件問題

問題：當在el-dialog內嵌套組件時，若el-dialog沒有打開，則獲取不到其內部嵌套的內容，ref也不可以

解決方法：在翻閱Element 隱藏滾動條部分的源碼時，發現其獲取dom元素的方法是通過computed來獲取

經過驗證，可以在彈框打開的回調里面，利用計算屬性進行獲取

    <el-dialog ref="dialog"  @opened="dialogOpened">
        <div ref="innerContent"></div>
    </el-dialog>

computed:{
    getInnerDom(){
        //此時之只能獲取到dialog
        console.log(this.$refs)
        return this.$refs.innerContent
    }
}
methods:{
    dialogOpened(){
        //此時可以獲取到內容節點
        console.log(this.getInnerDom)
    }
}

關于“vue異步加載dom元素之后無法獲得如何解決”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。