如何在Nuxt3中程序化调用focus()聚焦v-select组件

结论 #

完全可以实现，该需求在Nuxt3和Vue3中均被支持。

实现步骤 #

核心思路是通过Vue的ref获取v-select组件实例，在表单验证不通过时调用组件的focus()方法：

1. 绑定组件引用：给v-select添加ref属性，用于获取组件实例。
2. 表单验证与触发聚焦：在表单提交方法中判断值是否为空，若为空则调用组件的focus()方法（可配合nextTick确保DOM状态稳定）。

示例代码 #

<template>
  <v-form @submit.prevent="handleSubmit">
    <v-select
      v-model="selectedValue"
      ref="selectRef"
      label="请选择选项"
      :items="options"
    />
    <v-btn type="submit" class="mt-4">提交表单</v-btn>
  </v-form>
</template>

<script setup>
import { ref, nextTick } from 'vue'

// 绑定选择值
const selectedValue = ref('')
// 获取v-select组件引用
const selectRef = ref(null)
// 选项列表
const options = ref(['选项A', '选项B', '选项C'])

const handleSubmit = async () => {
  // 验证值是否为空
  if (!selectedValue.value) {
    // 等待DOM更新完成后调用聚焦
    await nextTick()
    // 调用v-select组件的focus方法
    selectRef.value.focus()
    return
  }
  // 验证通过后的表单提交逻辑
  console.log('表单提交成功，值为:', selectedValue.value)
}
</script>

注意事项 #

• 若使用Vuetify的v-select组件，其内部已封装focus()方法，直接调用组件实例的该方法即可，无需手动查找内部input元素。
• nextTick的作用是确保组件DOM已完成更新，避免因DOM状态未就绪导致聚焦失败（多数简单场景可省略，但复杂交互场景建议添加）。

内容的提问来源于stack exchange，提问作者Jacky Supit