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');
}

问题解决！

附上参考链接：

关于VUE3 setup()中动态获取dom - 爱码网