How to get DOM elements in setup vue3

vue3 gets DOM element in setup

This is undefined in vue3's setup(), so it cannot obtain the DOM element, and it cannot be obtained even if it is used, so I checked the Internet

The method is as follows

vue3 introduces a new APIgetCurrentInstance, calling it can get the instance object of the current component, and then add a ref to the element to be retrieved, through

<input ref='input'>

let instance=null
onMounted(()=>{
	instance=getCurrentInstance()
})

//You can get the value of the input box

vue3's setup uses getElementById to get dom element

cause

When using canvas in loop, each canvas is set an id. I want to operate canvas through id, but I cannot use native js to get the dom element in the setup, so this article comes.

Solution

First is the original code

function drawCategorySample(all_category_one) {
  let pixels = all_category_one[1][0]
  (pixels)
  let elem_id = 1 + '_' + pixels["category_id"]
  ("codeview">
async function drawCategorySample(all_category_one) {
  await nextTick()
  let pixels = all_category_one[1][0]
  (pixels)
  let elem_id = 1 + '_' + pixels["category_id"]
  ("id=" + elem_id)
  const canvas = ('1_0')
  (canvas)
  // let ctx = ('2d');
}

Problem solved!

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.