Vue 如何在頁面渲染完後去操作dom,而且只執行一次
阿新 • • 發佈:2019-01-24
在介面請求成功的回撥裡使用
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); }); } }