Vue 如何在页面渲染完后去操作dom,而且只执行一次

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Corey_mengxiaodong/article/details/81079043

在接口请求成功的回调里使用

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);
        });
    }
}

 

展开阅读全文

没有更多推荐了,返回首页