vue3如何在setup中獲取DOM元素
更新時間：2024年03月06日 08:50:57 作者：涵。
這篇文章主要介紹了vue3如何在setup中獲取DOM元素問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue3在setup獲取DOM元素
vue3的setup()中this為undefined，是獲取不到DOM元素的，用document.getElement也獲取不到，于是查了網(wǎng)上
方法如下
vue3引入一個新的APIgetCurrentInstance，調(diào)用它可以得到當(dāng)前組件的實例對象，然后給要獲取的元素添加ref，通過
<input ref='input'>
let instance=null
onMounted(()=>{
instance=getCurrentInstance()
})
//instance.refs.input.value可以獲取輸入框的值
vue3的setup用getElementById獲取dom元素
起因
在循環(huán)使用canvas時，給每個canvas設(shè)置了一個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中調(diào)用這個函數(shù)時，canvas打印出來是null，所以就有了下面的改進，即多加了一行await nextTick()，意思是等頁面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');
}問題解決！
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了Element中Select選擇器的實現(xiàn)，文中根據(jù)實例編碼詳細介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
使用v-for指令的時候遇到一個錯誤問題，具體錯誤代碼在文章給大家列出，對vue v-for使用問題感興趣的朋友跟隨小編一起學(xué)習(xí)吧2019-08-08
Vue中?引入使用?babel-polyfill?兼容低版本瀏覽器的方法
最近在項目中使用 webpack 打包后升級，用戶反饋使用瀏覽器（chrome 45）訪問白屏。經(jīng)過排查發(fā)現(xiàn)：由于 chrome 45 無法兼容 ES6 語法導(dǎo)致的，接下來給大家介紹下Vue中?引入使用?babel-polyfill?兼容低版本瀏覽器方法,需要的朋友可以參考下2023-02-02
表格Table實現(xiàn)前端全選所有功能方案示例(包含非當(dāng)前頁)
這篇文章主要為大家介紹了表格Table實現(xiàn)前端全選所有功能,包括非當(dāng)前頁的方案示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2024-02-02
vue調(diào)用微信JSDK 掃一掃，相冊等需要注意的事項
這篇文章主要介紹了vue調(diào)用微信JSDK 掃一掃，相冊等需要注意的事項，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
本文主要介紹了vuex命名空間的使用，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
近期項目需求相關(guān)地圖限定使用百度地圖,功能比較簡單,下面這篇文章主要給大家介紹了關(guān)于Vue2項目中對百度地圖的封裝使用的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
在做vue中大型項目的時候,官方推薦使用axios,但是原生的axios可能對項目的適配不友好,所以在工程開始的來封裝一下axios,下面這篇文章主要給大家介紹了關(guān)于axios請求二次封裝之避免重復(fù)發(fā)送請求的相關(guān)資料,需要的朋友可以參考下2022-10-10
在?Vue?開發(fā)中,為了防止組件之間樣式?jīng)_突,通常使用?scoped?屬性來實現(xiàn)樣式隔離,然而,在使用第三方?UI?組件庫）時,我們往往需要對這些組件的內(nèi)部元素進行樣式定制,本文檔詳細介紹了?Vue?中的樣式隔離機制、深度選擇器的用法及兼容性,需要的朋友可以參考下2025-10-10
最近工作中遇到了npm?run?dev報錯這個問題,通過查找相關(guān)資料最終解決了,所以下面這篇文章主要給大家介紹了關(guān)于npm?run?dev失敗的詳細解決辦法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07