为什么this.$refs.inputField.focus()不生效？如何点击按钮让input获焦？

不生效的常见原因 #

• 运行时input元素未完成挂载：如果input受v-if控制，或点击按钮同时触发了input的显示逻辑，调用focus时DOM还未渲染，$refs.inputField为undefined，方法调用失效。
• API使用错误：Vue3组合式API中已废弃this.$refs，直接声明的模板ref需要添加.value才能访问到真实DOM节点；如果绑定ref的是自定义输入组件，需要先访问组件实例下的$el属性才能拿到原生DOM。
• 元素状态问题：input设置了disabled、display: none等属性，原生focus方法本身无法触发。

修复方案 #

选项式API（Vue2/Vue3选项式写法） #

添加$nextTick等待DOM更新完成后再执行聚焦操作，如果是自定义组件则额外访问$el属性：

methods: {
  btn() {
    this.$nextTick(() => {
      // 原生input写法
      this.$refs.inputField.focus()
      // 若为自定义输入组件，替换为下行写法
      // this.$refs.inputField.$el.focus()
    })
  }
}

组合式API（Vue3 setup写法） #

声明和模板ref同名的响应式变量，配合nextTick等待DOM更新后调用focus：

<template>
  <input ref="inputField">
  <button @click="btn">Click</button>
</template>

<script setup>
import { ref, nextTick } from 'vue'
// 变量名必须和模板ref属性值完全一致
const inputField = ref(null)

const btn = async () => {
  await nextTick()
  // 原生input写法
  inputField.value?.focus()
  // 若为自定义输入组件，替换为下行写法
  // inputField.value?.$el.focus()
}
</script>

内容的提问来源于stack exchange，提问作者Muhammad Ameen Sheikh