Vue.js中v-if元素渲染后事件触发及jQuery访问方案咨询

问题的核心在于：Vue的DOM更新是异步的。当你修改showEl的值时，Vue并不会立刻把元素渲染到DOM里，而是将更新任务加入队列，等到当前事件循环结束后才会执行DOM更新。所以你在toggleMyTarget方法或者watch回调里直接调用$(".myTarget")，此时元素还没被渲染，自然拿不到。

下面给你几种可行的解决方法：

方法1：使用Vue的$nextTick（最推荐） #

$nextTick会在Vue完成DOM更新后执行传入的回调函数，这时候就能确保元素已经被渲染到DOM中了。

修改你的代码如下：

在方法内调用$nextTick #

var vue = new Vue({ 
  el: '#vue', 
  data: { 
    showEl : false, 
  }, 
  watch: { 
    showEl: function (newShowEl) { 
      // 只在元素显示时执行逻辑
      if (newShowEl) {
        this.$nextTick(() => {
          console.log("Watch event after DOM update: " + $(".myTarget")[0]); 
        });
      }
    } 
  }, 
  methods: { 
    toggleMyTarget: function () { 
      this.showEl = !this.showEl; 
      this.$nextTick(() => {
        console.log("Toggle after DOM update: " + $(".myTarget")[0]); 
      });
    } 
  }, 
 }); 

方法2：使用Vue自定义指令（适合重复触发场景） #

如果需要每次元素被插入DOM时都执行操作，可以自定义一个指令：

Vue.directive('post-render', {
  inserted: function (el) {
    // el就是当前被插入的元素，直接用jQuery操作即可
    console.log("Element rendered: " + $(el)[0]);
  }
});

然后在模板里给目标元素加上这个指令：

<div v-if="showEl" class="myTarget" v-post-render>我是要渲染的元素</div>

方法3：用Vue的ref替代jQuery（更符合Vue设计理念） #

Vue本身提供了获取DOM元素的方式——ref，完全可以不用jQuery。给元素添加ref属性：

<div v-if="showEl" class="myTarget" ref="myTarget">我是要渲染的元素</div>

然后在$nextTick里直接访问：

this.$nextTick(() => {
  console.log("Element via ref: " + this.$refs.myTarget);
});

这种方式更符合Vue数据驱动的思想，避免了直接操作DOM带来的潜在冲突。

内容的提问来源于stack exchange，提问作者Kasta