在接口请求成功的回调里使用
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);
});
}
}
版权声明:本文为Corey_mengxiaodong原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。