vue(uniapp中)无法获取元素的高度宽度等属性解决方法,mounted无法获取元素高度等, Cannot read property ‘offsetHeight‘ of undefined

请问你们是不是跟我一样,在mounted中无法获取到元素宽高,总是报未定义啥的,在评论区告诉我一下下呗,或许你们有更好的方法也请告诉一下,我大白一个,发文章也是为了对遇到同样问题的小伙伴有所帮助

mounted() {
    console.log(this.$refs.height.offsetHeight) 
    //  Error in onLoad hook: "TypeError: Cannot read property 'offsetHeight' of undefined"
}

换成以下方法就解决了:

mounted() {
	let view = uni.createSelectorQuery().in(this).select("#linesid")
	view.fields({size: true},res => {
		    // console.log(res.height);
		    this.height = res.height
		    this.lineNum = res.height / 20
		    this.lineNum > 5 ? this.lineFlag = true: this.lineFlag=false
	    }
	).exec()
		
},

官方链接

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 如果您正在使用 Vue 3 和 uni-app,那么可以使用 `ref` 来获取元素。以下是一个示例: ```vue <template> <div ref="myElement"></div> </template> <script> import { ref, onMounted } from 'vue'; export default { setup() { const myElement = ref(null); onMounted(() => { console.log(myElement.value); // 输出获取到的元素 }); return { myElement, }; }, }; </script> ``` 在这个示例,我们使用 `ref` 创建了一个名为 `myElement` 的引用,并在 `onMounted` 钩子函数打印了该引用的值,以确保成功获取元素。 请注意,我们在模板使用 `ref` 来指定要获取元素,并且必须使用 `.value` 来访问该引用的实际值。 如果您仍然无法获取元素,请确保元素已经正确渲染,并且您的代码没有任何语法错误。 ### 回答2: 在Vue3和uniapp,我们可以使用ref来获取元素的引用。但是如果在使用ref获取元素时出现失败的情况,可能有以下几种原因: 1. 元素未正确引用:确保在template正确声明了元素,并使用ref属性指定引用名称。例如:`<div ref="myDiv"></div>`。 2. 元素未在mounted生命周期获取:在Vue3mounted生命周期是最佳时机来获取元素的引用。确保在mounted生命周期正确使用ref获取元素,例如: ```javascript mounted() { this.$nextTick(() => { const myElement = this.$refs.myDiv; console.log(myElement); }); } ``` 3. 元素可能被v-if或v-show条件控制隐藏:如果元素的显示状态受到条件指令(v-if或v-show)的控制,当条件为false时,元素实际上是不存在的,无法通过ref获取。确保条件正确设置以显示该元素。 4. 元素可能存在在子组件:如果需要获取元素位于子组件,需要确保通过ref正确引用子组件,并在父组件使用`$refs`访问子组件元素。例如: ```html <template> <child-component ref="child"></child-component> </template> <script> import ChildComponent from "./ChildComponent"; export default { components: { ChildComponent }, mounted() { this.$nextTick(() => { const myElement = this.$refs.child.$refs.myDiv; console.log(myElement); }); } }; </script> ``` 5. uniapp版本兼容问题:如果使用的是旧版本的uniapp,可能会存在与Vue3的ref语法不兼容的问题。请确保使用的uniapp版本与Vue3兼容。 总结:在使用Vue3和uniapp时,通过ref获取元素可能会遇到一些问题,但请确保元素正确引用、在合适的生命周期获取、条件正确设置以及处理子组件元素引用。 ### 回答3: 在Vue 3和Uniapp使用ref获取元素时,有时可能会失败。原因可能是以下几点: 1. 元素被动态生成:如果要获取元素是在Vue的生命周期钩子函数之外动态生成的,那么在ref绑定时可能无法找到该元素。这种情况下,可以尝试在mounted生命周期钩子函数获取元素,这样可以确保元素已经被完全渲染到DOM。 2. 元素不存在:如果要获取元素在渲染期间条件不满足而未被渲染到DOM,那么ref获取将会失败。在这种情况下,可以在模板添加v-if指令或者使用v-show指令来保证元素存在。 3. 元素在组件内部:如果要获取元素是在组件内部而不是全局范围内,那么在使用ref绑定时需要确保ref在同一组件内部。在Vue 3,可以使用setup函数的ref来获取组件内部的元素。 4. 组件嵌套问题:如果要获取元素位于子组件,那么在父组件使用ref获取无法找到该元素。这时,可以尝试使用$refs来访问子组件的ref。 5. 错误的ref绑定方式:在Vue 3,ref获取元素的方式与Vue 2稍有不同。在Vue 3,可以使用`ref`函数来获取元素,而不是直接使用`this.$refs`。例如,`const myElement = ref(null);`来创建一个ref,然后在元素上使用`ref="myElement"`来绑定。 总结起来,如果在Vue 3和Uniapp使用ref无法成功获取元素,请检查元素是否被动态生成、元素是否存在、是否位于同一组件内部、是否存在组件嵌套问题,以及是否使用了正确的ref绑定方式。如果仍然无法解决问题,请提供更多的代码和错误信息,以便更好地帮助你解决问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值