js获取不到v-for里面的元素

需求描述

笔者在开发某个界面时，需要操作v-for循环中某个div(该节点指定特定class)节点对其绑定鼠标事件，同时为了测试也在v-for之外也添加了同样的节点，如下图所示，图1是v-for要操作的div节点，图2是自己弄的假数据i节点，图3的mouted操作代码

 

 

 

 

问题描述

每次加载界面时，只能获取到假数据的dom，无法获取v-for的dom
解决方案
失败的解决方案

    一开始以为是dom没加载完成的原因于是使用了$(document).ready(function(){})，虽然可以获取到v-for中的dom，但是需要自己手动刷新界面一次
    $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM，还是获取不到失败

成功的解决方案
使用updated周期函数

mounted 阶段， mounted 钩子仅仅做加载数据而已，加载回来的数据是不会在这个阶段更新到 DOM 中的。所以 v-if、v-for、v-show 的 DOM 节点是无法取到的，因为在 mounted 阶段他们根本不存在。

mounted 阶段是加载阶段， updated 阶段则是完成了数据更新到 DOM 的阶段(对加载回来的数据进行处理)，此时，在使用document等获取dom是可以得到的

updated 与 mounted 不同的是，在每一次的 DOM 结构更新，Vue.js 都会调用一次 updated 钩子函数！而 mounted 钩子函数仅仅只执行一次而已。
附上代码

 

标签：DOM,元素,js,获取,dom,mounted,节点,加载
来源： https://www.cnblogs.com/qianzf/p/16687388.html