Vue页面加载后声明变量 v-for获取DOM一方法失效如何解决

两个方法DOM查询结果不一致的核心原因是Vue的DOM更新是异步执行的，两个方法的触发时机不同：

• filterByName一般是用户输入搜索关键词时触发，此时页面已经完成初次渲染，v-for生成的.person元素已经挂载到DOM树，所以querySelectorAll能拿到正确的节点集合。
• filterByPresence大概率是在组件刚加载、或者users列表数据刚赋值时就触发了，此时Vue还没完成v-for的异步渲染流程，DOM树上还没有生成对应的.person元素，自然查询结果长度为0。你之前用生命周期钩子没解决也是同理：比如在mounted钩子触发时，如果users是接口返回的异步数据，此时数据还没赋值，v-for根本没有可渲染的内容，当然拿不到元素。

另外你当前手动操作DOM改样式的写法本身就不符合Vue数据驱动的设计思路，就算靠时序补丁解决了当前问题，后续列表更新、筛选逻辑叠加时还是会反复出现DOM不同步的问题。

方案1：数据驱动实现（推荐，从根源规避DOM时序问题） #

完全抛弃手动查询DOM、修改元素样式的逻辑，通过计算属性直接过滤要展示的用户列表，所有视图更新交给Vue接管，根本不会存在拿不到DOM的问题。

首先修改模板代码：

<div 
  v-for="user in filteredUsers" 
  :key="user.id" 
  class="person"
>
  <span class="cardName h4">{{ user.name }}</span>
</div>

注意两个优化点：

• 不要再用index作为v-for的key，列表筛选、排序时index会动态变化，容易导致Vue渲染错位，优先用用户数据里的唯一id作为key。
• 去掉自定义的presenceDOM属性，用户状态直接从源数据读取即可，不需要挂在DOM上再手动查询。

然后修改脚本逻辑：

export default {
  data() {
    return {
      users: [], // 原始用户列表
      sortName: '', // 名称搜索关键词
      filterMode: 0, // 0=筛选无在线状态 1=筛选有在线状态 2=展示全部
    }
  },
  computed: {
    filteredUsers() {
      let displayList = [...this.users]
      // 按名称过滤
      if (this.sortName.trim()) {
        const keyword = this.sortName.toUpperCase()
        displayList = displayList.filter(user => user.name.toUpperCase().includes(keyword))
      }
      // 按在线状态过滤
      switch(this.filterMode) {
        case 0:
          displayList = displayList.filter(user => !user.presence)
          break
        case 1:
          displayList = displayList.filter(user => user.presence)
          break
        case 2:
          // 全量展示无需额外处理
          break
      }
      return displayList
    }
  },
  methods: {
    filterByName() {
      console.log("Sorting by name")
      // 不需要手动操作DOM，计算属性依赖变化时会自动更新视图
    },
    filterByPresence() {
      if (this.filterMode === 0) {
        console.log("Filtering by lack of presence")
        this.filterMode = 1
      } else if (this.filterMode === 1) {
        console.log("Filtering by presence")
        this.filterMode = 2
      } else if (this.filterMode === 2) {
        console.log("Showing all")
        this.filterMode = 0
      }
      // 切换filterMode后计算属性自动触发重渲染，无需手动改样式
    }
  }
}

方案2：保留原有DOM操作逻辑的临时修复 #

如果暂时不想重构逻辑，可以把DOM查询和操作的代码放到this.$nextTick回调中执行，等Vue完成DOM更新后再去查询节点，就能拿到正确的元素集合。
修改后的filterByPresence代码如下：

filterByPresence() {
  // 等DOM更新完成后再执行查询
  this.$nextTick(() => {
    const people = document.querySelectorAll(".person")
    console.log(people.length) 
    
    if (this.filterMode == 0) {
      console.log("Filtering by lack of presence")
      for (let i = 0; i < people.length; i++) {
        people[i].style.display = !people[i].getAttribute("presence") ? "" : "none"
      }
      this.filterMode = 1;
    } else if (this.filterMode == 1) {
      console.log("Filtering by presence")
      for (let i = 0; i < people.length; i++) {
        people[i].style.display = people[i].getAttribute("presence") ? "" : "none"
      }
      this.filterMode = 2;
    } else if (this.filterMode == 2) {
      console.log("Showing all")
      for (let i = 0; i < people.length; i++) {
        people[i].style.display = ""
      }
      this.filterMode = 0
    }
  })
}

如果filterByName也偶发拿不到DOM的问题，同样套一层$nextTick即可。但这种写法属于Vue开发反模式，后期维护成本高，只适合临时应急使用。

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