vue-$nextTick() 没有获取到DOM

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

问题说明

没有输出 labelList 更新后的所有 li 节点

<ul>
    <li v-for="label in labelList">{{label}}</li>
</ul>
<script>
    data：{labelList:[1,2,3]}
    mounted:{
     this.labelList = [2,3,4,5]
     this.$nextTick(()=>{
        // 输出li标签 => 三个li标签
      })
    }
</script>

解决办法

this.$nextTick(()=>{
    setTimeout(()=>{
        // 输出li标签 => 四个li标签
    },0)
})

原理解释

官网文档上写明在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM，也就是说

if(newList.length > oldList.length){
  because: 多出来的 li 标签不在 vue 监控范围内
  so: 输出不出来
}

也就是说： nextTick 是在 已有的DOM更新循环以后执行的，你新生成的 DOM 是新生成的，不是在原来的 DOM 上更新的

至于 setTimeout 以后就获取到想要的结果了，可能是因为异步同步之类的原因，目前知识储备不足，无法直白地解释，暂不写
PS: if( 储备到这些知识 && 想起来这个坑){补一补}

以上是 vue-$nextTick() 没有获取到DOM 的全部内容， 来源链接： utcz.com/z/377138.html

回到顶部