解决vue中无法获取v-for的dom节点。vue使用v-for 获取不到dom对象，无法获取v-for循环的div的高度

 

目录

解决方案

失败的解决方案

成功的解决方案

解决方案一：使用updated生命周期函数

解决方案二：使用watch

---

 

 

需求描述
笔者在开发某个界面时，需要操作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 钩子函数仅仅只执行一次而已。

附上代码

updated: function () {
			this.viewScroll()
		},

 

解决方案二：  

首先使用watch监听v-for 循环的对象devices,猜测监听到devices变化一定是devices全部赋值后，也就是devices这个列表已经赋值完成了。devices赋值完成后就会执行v-for循环，因为要想执行v-for必须要等devices列表赋值完成后。这个时候使用this.$nextTick( () => { } )在本次v-for循环完毕也就是本次dom渲染完成后再执行this.viewScroll()就可以获取到v-for后生成的元素信息了

watch: {
	devices() {
	    this.$nextTick(() => {
	        this.viewScroll()
	    })
	}
},

 获取v-for循环出来的元素对象：

	viewScroll:function(){
				var allHeight = $('.list').outerHeight();

 去后台获取列表数据赋值给devices ：

getData: function () {
				const _this = this;
				_this.columns.id=_this.id;
				$.post("/tdm/device/selectDeviceListWithRealTime",{} , function (response) {
					_this.devices = response.rows;
				})
			},

文章知识点与官方知识档案匹配，可进一步学习相关知识
————————————————
版权声明：本文为CSDN博主「shark-chili」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/shark_chili3007/article/details/109842200