因v-if渲染延迟导致DOM元素无法找到的技术问题求助

这个问题我太熟悉了——Vue的异步DOM更新机制在这儿给你挖了个小坑！当你修改this.errors数组后，Vue并不会立刻把<ul class="error">渲染到DOM里，而是把这次更新放进异步队列，等当前同步代码跑完才会处理队列里的DOM更新。所以你在push错误信息后立刻用jQuery查找元素，自然找不到还没生成的DOM节点。

下面给你几个靠谱的解决方案，从最符合Vue最佳实践的开始：

方案1：用Vue响应式样式绑定替代jQuery（强烈推荐） #

既然用了Vue，就尽量别直接操作DOM，用动态样式/类绑定更优雅，还能完美避开异步更新的问题：

动态样式写法 #

<template>
  <ul v-if="errors.length" class="error" :style="errorBorderStyle">
    <li v-for="error in errors" :key="error">{{ error }}</li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      errors: [],
      errorBorderStyle: {}
    }
  },
  methods: {
    validate() {
      if (someErrorCondition) {
        this.errors.push('You have an error');
        // 直接修改样式数据，Vue会自动同步到DOM
        this.errorBorderStyle = { border: 'solid 10px red' };
      }
    }
  }
}
</script>

动态类写法（更适合样式复用） #

<template>
  <ul v-if="errors.length" class="error" :class="{ 'error-highlight': showErrorBorder }">
    <li v-for="error in errors" :key="error">{{ error }}</li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      errors: [],
      showErrorBorder: false
    }
  },
  methods: {
    validate() {
      if (someErrorCondition) {
        this.errors.push('You have an error');
        this.showErrorBorder = true;
      }
    }
  }
}
</script>
<style>
.error-highlight {
  border: solid 10px red;
}
</style>

方案2：用$nextTick等待DOM更新完成 #

如果你一定要保留jQuery操作，就用Vue的$nextTick方法——它会在DOM更新完成后执行回调，确保你要找的元素已经存在：

<template>
  <ul v-if="errors.length" class="error">
    <li v-for="error in errors" :key="error">{{ error }}</li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      errors: []
    }
  },
  methods: {
    validate() {
      if (someErrorCondition) {
        this.errors.push('You have an error');
        // 等DOM更新完再执行jQuery操作
        this.$nextTick(() => {
          $(this.$el).find('.error').css('border', 'solid 10px red');
        });
      }
    }
  }
}
</script>

为什么第二次调用会正常？ #

第一次调用validate时，DOM更新还在异步队列里没执行；等你第二次调用时，第一次的DOM更新已经完成，<ul class="error">已经存在，所以jQuery能找到元素。但这只是巧合，绝对不能依赖这种偶然行为哦。

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