When I migrated from Vue 2 to Vue 3, one thing was annoying - how to get access to a DOM element in Composition API? In Vue 2, it was easy, you just needed to use the this.$refs
object. How to do it in Vue 3?
<script setup>
import { ref } from 'vue'
const inputText = ref()
const setFocus = () => {
inputText.value.focus()
}
</script>
<template>
<input type="text" ref="inputText"/>
<button @click="setFocus()">set focus</button>
</template>
Ta-da! You only need to create a reactive variable in the script section - just remember that a name of a variable has to be like value in ref
. You can see the working example here.
I'll create short posts like this from time to time. It's a small thing but it might be annoying while migrating to the new version of Vue.