vue3的setup中如何用getElementById获取dom元素
在循环使用canvas时,给每个canvas设置了一个id,我想通过id来操作canvas,但是在setup中不能用原生的js获取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');
}
问题解决!
附上参考链接:
更多推荐
已为社区贡献1条内容
所有评论(0)