• js获取不到vfor里面的元素


    需求描述

    笔者在开发某个界面时,需要操作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 钩子函数仅仅只执行一次而已。
    附上代码
  • 相关阅读:
    URLOS用户福利:申请免费的泛域名(通配符域名)SSL证书
    主机管理面板LuManager以Apache2协议开源发布,可用作商业用途
    微服务设计概览
    使用SpringBoot搭建Web项目
    公共方法整合(四)数组相关
    阿里云短信整合封装类库
    高德地图接口使用整理
    公共方法整合(三)时间相关方法
    PHP 服务端友盟推送
    html 录音并上传
  • 原文地址:https://www.cnblogs.com/qianzf/p/16687388.html
Copyright © 2020-2023  润新知