vue3如何在setup中获取DOM元素
更新时间：2024年03月06日 08:50:57 作者：涵。
这篇文章主要介绍了vue3如何在setup中获取DOM元素问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue3在setup获取DOM元素
vue3的setup()中this为undefined，是获取不到DOM元素的，用document.getElement也获取不到，于是查了网上
方法如下
vue3引入一个新的APIgetCurrentInstance，调用它可以得到当前组件的实例对象，然后给要获取的元素添加ref，通过
<input ref='input'>
let instance=null
onMounted(()=>{
instance=getCurrentInstance()
})
//instance.refs.input.value可以获取输入框的值
vue3的setup用getElementById获取dom元素
起因
在循环使用canvas时，给每个canvas设置了一个id，我想通过id来操作canvas，但是在setup中不能用原生的js获取dom元素， 于是就有了这篇文章。
解决办法
首先是原始代码
function drawCategorySample(all_category_one) {
let pixels = all_category_one[1][0]
console.log(pixels)
let elem_id = 1 + '_' + pixels["category_id"]
console.log("id=" + elem_id)
const canvas = document.getElementById('1_0')
console.log(canvas)
// let ctx = canvas.getContext('2d');
}显然，在onmounted中调用这个函数时，canvas打印出来是null，所以就有了下面的改进，即多加了一行await nextTick()，意思是等页面dom元素全都挂载后再执行后面的代码。
async function drawCategorySample(all_category_one) {
await nextTick()
let pixels = all_category_one[1][0]
console.log(pixels)
let elem_id = 1 + '_' + pixels["category_id"]
console.log("id=" + elem_id)
const canvas = document.getElementById('1_0')
console.log(canvas)
// let ctx = canvas.getContext('2d');
}问题解决！
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue中v-if 和v-permission 共同使用的坑及解决方案
这篇文章主要介绍了vue中v-if 和v-permission 共同使用的坑及解决方案的相关资料,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了vue3中watch和watchEffect实战梳理，watch和watchEffect都是vue3中的监听器，但是在写法和使用上是有区别的。下文介绍他们之间的方法及区别，需要的朋友可以参考一下2022-07-07
这篇文章主要为大家详细介绍了Vue自定义省市区三级联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要为大家详细介绍了vue3封装自己的分页组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
element-plus报错ResizeObserver loop limit exceeded解决办法
这篇文章主要给大家介绍了关于element-plus报错ResizeObserver loop limit exceeded的解决办法,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
这篇文章主要为大家详细介绍了vue微信分享出来的链接点开是首页问题的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
在我们日常开发中,有些组件里面加载非常慢,导致我们路由跳转的时候回出现卡顿情况,这篇文章主要介绍了Vue3: Suspense异步加载组件,需要的朋友可以参考下2023-12-12
uniapp组件uni-file-picker中对上传的图片进行压缩至1兆以内(推荐)
我在做uniapp项目时，用的uni-file-picker组件，这是我做的一个项目实例，主要是将图片通过接口传至后台服务器，本文给大家分享uniapp组件uni-file-picker中对上传的图片进行压缩再上传，感兴趣的朋友跟随小编一起看看吧2022-11-11
这篇文章主要为大家详细介绍了Vuex实现简单购物车，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
txt文件在线预览不需要下载另外的插件,主要有两种形式,一种是上传完成后实现预览；另一种是后端提供文件下载接口,获取文件在线地址实现预览；本文给大家介绍了Vue2实现txt文件在线预览的代码示例,需要的朋友可以参考下2025-01-01
最新评论