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)文章
Element中Select選擇器的實(shí)現(xiàn)
本文主要介紹了Element中Select選擇器的實(shí)現(xiàn)，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
使用v-for指令的時(shí)候遇到一個(gè)錯(cuò)誤問(wèn)題，具體錯(cuò)誤代碼在文章給大家列出，對(duì)vue v-for使用問(wèn)題感興趣的朋友跟隨小編一起學(xué)習(xí)吧2019-08-08
Vue中?引入使用?babel-polyfill?兼容低版本瀏覽器的方法
最近在項(xiàng)目中使用 webpack 打包后升級(jí)，用戶反饋使用瀏覽器（chrome 45）訪問(wèn)白屏。經(jīng)過(guò)排查發(fā)現(xiàn)：由于 chrome 45 無(wú)法兼容 ES6 語(yǔ)法導(dǎo)致的，接下來(lái)給大家介紹下Vue中?引入使用?babel-polyfill?兼容低版本瀏覽器方法,需要的朋友可以參考下2023-02-02
表格Table實(shí)現(xiàn)前端全選所有功能方案示例(包含非當(dāng)前頁(yè))
這篇文章主要為大家介紹了表格Table實(shí)現(xiàn)前端全選所有功能,包括非當(dāng)前頁(yè)的方案示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2024-02-02
vue調(diào)用微信JSDK 掃一掃，相冊(cè)等需要注意的事項(xiàng)
這篇文章主要介紹了vue調(diào)用微信JSDK 掃一掃，相冊(cè)等需要注意的事項(xiàng)，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
本文主要介紹了vuex命名空間的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue2項(xiàng)目中對(duì)百度地圖的封裝使用詳解
近期項(xiàng)目需求相關(guān)地圖限定使用百度地圖,功能比較簡(jiǎn)單,下面這篇文章主要給大家介紹了關(guān)于Vue2項(xiàng)目中對(duì)百度地圖的封裝使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
axios請(qǐng)求二次封裝之避免重復(fù)發(fā)送請(qǐng)求
在做vue中大型項(xiàng)目的時(shí)候,官方推薦使用axios,但是原生的axios可能對(duì)項(xiàng)目的適配不友好,所以在工程開(kāi)始的來(lái)封裝一下axios,下面這篇文章主要給大家介紹了關(guān)于axios請(qǐng)求二次封裝之避免重復(fù)發(fā)送請(qǐng)求的相關(guān)資料,需要的朋友可以參考下2022-10-10
在Vue中實(shí)現(xiàn)樣式隔離的幾種方法小結(jié)
在?Vue?開(kāi)發(fā)中,為了防止組件之間樣式?jīng)_突,通常使用?scoped?屬性來(lái)實(shí)現(xiàn)樣式隔離,然而,在使用第三方?UI?組件庫(kù)）時(shí),我們往往需要對(duì)這些組件的內(nèi)部元素進(jìn)行樣式定制,本文檔詳細(xì)介紹了?Vue?中的樣式隔離機(jī)制、深度選擇器的用法及兼容性,需要的朋友可以參考下2025-10-10
最近工作中遇到了npm?run?dev報(bào)錯(cuò)這個(gè)問(wèn)題,通過(guò)查找相關(guān)資料最終解決了,所以下面這篇文章主要給大家介紹了關(guān)于npm?run?dev失敗的詳細(xì)解決辦法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07