通过单击VueJS 3的按钮关注输入字段

Question

<template>
<button @click="focusInput">Click me to focus on the input</button>
<input ref="inputField" type="text">
</template>
<script setup>
const focusInput = () => {
this.$refs.inputField.focus();
};
</script>

我试图将焦点设置为输入字段上的按钮单击，但不与Vue 3工作。如果有人能帮忙，我将不胜感激。由于

Answer 1

试试下面的代码片段(this在脚本设置中是别的东西，你不能使用$refs):

<script setup>
import { ref } from 'vue'
const inputField = ref()
const focusInput = () => {
inputField.value.focus();
};
</script>

const { ref } = Vue
const app = Vue.createApp({
setup() {
const inputField = ref()
const focusInput = () => {
inputField.value.focus()
}
return { focusInput, inputField }
},
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<button @click="focusInput">Click me to focus on the input</button>
<input ref="inputField" type="text">
</div>