1. 程式人生 > >Vue 如何在頁面渲染完後去操作dom,而且只執行一次

Vue 如何在頁面渲染完後去操作dom,而且只執行一次

在介面請求成功的回撥裡使用

this.$nextTick(() =>{
  // 在這裡面去獲取DOM
})。

在mounted生命週期,元件掛載成功,但還未渲染,自然獲取不到相關的DOM節點。看你資料好像不是前端,舉個更簡單的例子,你在html中,把 console.log(document.querySelector('body'))寫在body標籤前面,程式碼執行時機先於頁面渲染,結果就是undefined。
不推薦用updated, beforeUpdate生命週期,這2個生命週期只會在資料發生變化時才觸發。如果你請求介面的資料是放在created生命週期(我推薦放在created裡面去發起請求),初次進入頁面是不會觸發updated, beforeUpdate裡面的程式碼。
如果你非要要updated,並且希望第一次進入頁面即可獲取到DOM節點,那麼請在mounted生命週期請求介面資料,而不是created了

例項

methods: {
    /**
     * 獲取練習卷詳情
     */
    PreviewPractice() {
      this.spinShow = true;
      var params = {
        Id: this.FileID // 練習卷Id !!required!!
      };
      var vm_this = this;
      GetLessonPractice(this.orgID, params)
        .then(function(data) {
          var _Data = data;
          vm_this.PracticeDetailsData = _Data;
          var newData = [];
          for (var i = 0; i < _Data.length; i++) {
            if (
              i == 0 ||
              _Data[i].QuestionTypeId != _Data[i - 1].QuestionTypeId
            ) {
              newData.push({
                QuestionTypeId: _Data[i].QuestionTypeId,
                QuestionType: _Data[i].QuestionType
              });
            }
            _Data[i].QuestionData =
              _Data[0].QuestionData.substr(0, 3) +
              "\u003cspan\u003e" +
              (i + 1) +
              "、\u003c/span\u003e" +
              _Data[i].QuestionData.substr(3);
            _Data[i].href = "#" + _Data[i].Id;
          }
          for (var i = 0; i < newData.length; i++) {
            newData[i].QuestionTypeName =
              num[i] + "." + newData[i].QuestionType;
          }
          vm_this.QuestionTypeData = newData;
          vm_this.spinShow = false;
        })
        .then(function(data) {
          vm_this.$nextTick(() => {
            // 在這裡面去獲取DOM
            vm_this.ImgUrl();
          });
        })
        .catch(function(error) {
          console.log(error);
        });
    }
}