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 组件之间事件触发($emit)与event Bus($on)的用法说明
这篇文章主要介绍了vue 组件之间事件触发($emit)与event Bus($on)的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
简单理解vue中el、template、replace元素
这篇文章主要帮助大家简单理解vue中el、template、replace元素,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
Vue build过程取消console debugger控制台信息输出方法详解
这篇文章主要为大家介绍了Vue build过程取消console debugger控制台信息输出方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-09-09
vue.js项目中实用的小技巧汇总
这篇文章主要给大家介绍了关于vue.js项目中实用的小技巧，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2017-11-11
浅谈vue的iview列表table render函数设置DOM属性值的方法
下面小编就为大家带来一篇浅谈vue的iview列表table render函数设置DOM属性值的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
一文详解vue3项目实战中的接口调用
在企业开发过程中,往往有着明确的前后端的分工,前端负责接收、使用接口,后端负责编写、处理接口,下面这篇文章主要给大家介绍了关于vue3项目实战中的接口调用的相关资料,需要的朋友可以参考下
2022-12-12
vue车牌输入组件使用方法详解
这篇文章主要为大家详细介绍了vue车牌输入组件的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
Nuxt如何实现将服务测数据存储到Vuex中
这篇文章主要介绍了Nuxt如何实现将服务测数据存储到Vuex中的方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue中更改数组中属性,在页面中不生效的解决方法
今天小编就为大家分享一篇vue中更改数组中属性,在页面中不生效的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
vue普通加密及国密SM2、SM3和sm4的使用例子
在我的项目中,甲方要求系统登录时对密码进行加密后再传给后端,指定使用国密SM3,下面这篇文章主要给大家介绍了关于vue普通加密及国密SM2、SM3和sm4使用的相关资料,需要的朋友可以参考下
2022-12-12