vue3如何在setup中獲取DOM元素
vue3在setup獲取DOM元素
vue3的setup()中this為undefined，是獲取不到DOM元素的，用document.getElement也獲取不到，于是查了網(wǎng)上
方法如下
vue3引入一個(gè)新的APIgetCurrentInstance，調(diào)用它可以得到當(dāng)前組件的實(shí)例對(duì)象，然后給要獲取的元素添加ref，通過(guò)
<input ref='input'>
let instance=null
onMounted(()=>{
instance=getCurrentInstance()
})
//instance.refs.input.value可以獲取輸入框的值
vue3的setup用getElementById獲取dom元素
起因
在循環(huán)使用canvas時(shí)，給每個(gè)canvas設(shè)置了一個(gè)id，我想通過(guò)id來(lái)操作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中調(diào)用這個(gè)函數(shù)時(shí)，canvas打印出來(lái)是null，所以就有了下面的改進(jìn)，即多加了一行await nextTick()，意思是等頁(yè)面dom元素全都掛載后再執(zhí)行后面的代碼。
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');
}問(wèn)題解決！
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中v-if?和v-permission?共同使用的坑及解決方案
這篇文章主要介紹了vue中v-if?和v-permission?共同使用的坑及解決方案的相關(guān)資料,需要的朋友可以參考下2023-07-07
vue3中watch和watchEffect實(shí)戰(zhàn)梳理
這篇文章主要介紹了vue3中watch和watchEffect實(shí)戰(zhàn)梳理，watch和watchEffect都是vue3中的監(jiān)聽(tīng)器，但是在寫法和使用上是有區(qū)別的。下文介紹他們之間的方法及區(qū)別，需要的朋友可以參考一下2022-07-07
Vue自定義省市區(qū)三級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了Vue自定義省市區(qū)三級(jí)聯(lián)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家詳細(xì)介紹了vue3封裝自己的分頁(yè)組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
element-plus報(bào)錯(cuò)ResizeObserver?loop?limit?exceeded解決辦法
這篇文章主要給大家介紹了關(guān)于element-plus報(bào)錯(cuò)ResizeObserver?loop?limit?exceeded的解決辦法,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
vue微信分享出來(lái)的鏈接點(diǎn)開(kāi)是首頁(yè)問(wèn)題的解決方法
這篇文章主要為大家詳細(xì)介紹了vue微信分享出來(lái)的鏈接點(diǎn)開(kāi)是首頁(yè)問(wèn)題的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
在我們?nèi)粘ｉ_(kāi)發(fā)中,有些組件里面加載非常慢,導(dǎo)致我們路由跳轉(zhuǎn)的時(shí)候回出現(xiàn)卡頓情況,這篇文章主要介紹了Vue3:?Suspense異步加載組件,需要的朋友可以參考下2023-12-12
uniapp組件uni-file-picker中對(duì)上傳的圖片進(jìn)行壓縮至1兆以內(nèi)(推薦)
我在做uniapp項(xiàng)目時(shí)，用的uni-file-picker組件，這是我做的一個(gè)項(xiàng)目實(shí)例，主要是將圖片通過(guò)接口傳至后臺(tái)服務(wù)器，本文給大家分享uniapp組件uni-file-picker中對(duì)上傳的圖片進(jìn)行壓縮再上傳，感興趣的朋友跟隨小編一起看看吧2022-11-11
Vuex實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車
這篇文章主要為大家詳細(xì)介紹了Vuex實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
Vue2實(shí)現(xiàn)txt文件在線預(yù)覽的代碼示例
txt文件在線預(yù)覽不需要下載另外的插件,主要有兩種形式,一種是上傳完成后實(shí)現(xiàn)預(yù)覽；另一種是后端提供文件下載接口,獲取文件在線地址實(shí)現(xiàn)預(yù)覽；本文給大家介紹了Vue2實(shí)現(xiàn)txt文件在線預(yù)覽的代碼示例,需要的朋友可以參考下2025-01-01