首页 > 其他分享 >vue中获取dom元素的集合的length不正确的问题

vue中获取dom元素的集合的length不正确的问题

时间:2022-12-29 13:44:27浏览次数:40  
标签:vue dom 元素 获取 length mounted

可以知道在mounted阶段,mounted 不会承诺所有的子组件也都一起被挂载,所以在此阶段,dom结构还没加载完,js就执行了。所以会打印出不正确的length属性。

解决方法:

1.$nextTick包裹循环获取dom的方法(亲测无效原因不明)

2.定时器延迟500毫秒后调用获取dom的方法,或在dom元素以来的数据请求后循环获取元素(有效)

标签:vue,dom,元素,获取,length,mounted
From: https://www.cnblogs.com/ysx1129/p/17012327.html

相关文章

  • vue-cropper插件使用
    <template><el-form-item:label="label"prop="coverUrl"><el-imagev-if="ruleCoverUrl"class="uploadImgwh":src="ruleCoverUrl"@c......
  • VueJS使用addEventListener的事件如何触发执行函数的this
    1、使用浏览器监听切屏为例此处为考虑浏览器兼容性推荐使用:document.addEventListener1.1、正常函数使用如下:letn=0;letmax=3;//切屏最大次数document.addE......
  • (一)Vue 3 项目搭建
    确保已安装16.0或更高版本的Node.js,然后在命令行中运行以下命令:npminitvue@latest这一指令将会安装并执行create-vue,它是Vue官方的项目脚手架工具。你将会看到......
  • vue基本语法
    vue基本语法v-bind<!DOCTYPEhtml><htmllang="en"xmlns:v-bind="http://www.w3.org/1999/xhtml"><head><metacharset="UTF-8"><title>Title</title>......
  • vue入门
    Vue入门SOC:关注度分离原则网页三要素:HTML+CSS+js:视图:给用户看,刷新后台给的数据网络通信:axios页面跳转:Vue-router状态管理:vuexVue-UI:ICEM模型V视图C控制器......
  • 【前端vue开发架构】vue开发单页项目架构总结
    活动设计的前端架构主要的技术栈为Vuejs,Webpack,请自行阅读如下技术或者框架的文档:一、基础说明:node (https://nodejs.org/en/)npm(​​https://www.npmjs.com​​)webpac......
  • Vue2下的路由的基本使用
    路由理解:一个路由(route)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理。前端路由:key是路径,value是组件。1.基本使用安装vue-router,命令:npmivue-......
  • vue3+vite build打包报错:Some chunks are larger than 500 KiB after minification. C
    看官方的解决方案:1、在rollup配置文件中添加output.manualChunks,将模块拆分成多个chunk,减小每个chunk的大小;2、build.chunkSizeWarningLimit,提高报错的阈值;3、使用动......
  • Vue插槽
    什么是插槽?插槽(Slot)是Vue提出来的一个概念,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有更大的重用性。插槽显不显示、怎样显示是由父组件来控制......
  • vue项目中使用histroy代替hash(兼容刷新后页面丢失)
    1、在node.js解决node中安装插件connect-history-api-fallbacknpminstall--saveconnect-history-api-fallbackvarhistory=require('connect-history-api-fallb......