页面如下:

<template>
    <div :id="objId" class="randomBoxDiv" :style="stylesBox">
    </div>
</template>

其中,div的ID是动态绑定的。

JavaScript代码如下:

<script>
export default {
  data() {
    return {
      objId: ""
    };
  },
  mounted: function() {
    this.initParm(); //参数初始化

    console.log($(".randomBoxDiv"));
    console.log(this.objId);
    console.log($("#"+this.objId));
  },
  methods:{
    initParm: function(){
	this.objId=this.getUid();
    },
    getUid: function() {
      function S4() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
      }
      return "tagdiv" + S4() + S4() + S4() + S4();
    }
  }
 }
 </script>

浏览器console打印出来的对象,ID已经设置上了,但是用ID获取对象却获取不到。查资料以后发现,这跟vue的渲染顺序有关,在mounted执行时,dom其实并没有渲染完成,所以,在mounted中用动态的ID获取对象是获取不到的。解决方式即是用vue提供的$nextTick,如下:

mounted: function() {
    this.initParm(); //参数初始化

    console.log($(".randomBoxDiv"));
    console.log(this.objId);

    //把动态获取ID的操作放到this.$nextTick的回调中执行即可
    this.$nextTick(() => {
        console.log($("#"+this.objId));
    }
  }

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM。

以上,留做记录。

Logo

前往低代码交流专区

更多推荐