如何在Vue中让FormKit表单的第一个文本输入框自动获取焦点？

你遇到的问题是因为通过ref获取到的是FormKit组件实例，而非原生的input DOM元素，直接调用focus()自然会报错。以下是两种可行的解决方式：

方法一：访问组件实例的input属性获取原生元素 #

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

const msg = ref('Hello World!')
const target = ref()

onMounted(() => {
  // 获取FormKit内部的原生input元素并调用聚焦方法
  target.value.input?.focus()
})
</script>

<template>
  <FormKit type="text" v-model="msg" ref="target" />
  <FormKit type="text" value="bla" />
</template>

方法二：结合nextTick确保DOM完全渲染 #

如果组件渲染存在延迟，可以用nextTick等待DOM更新完成后再执行聚焦：

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

const msg = ref('Hello World!')
const target = ref()

onMounted(async () => {
  await nextTick()
  target.value.input?.focus()
})
</script>

<template>
  <FormKit type="text" v-model="msg" ref="target" />
  <FormKit type="text" value="bla" />
</template>

说明 #

FormKit组件实例会暴露input属性，指向内部的原生输入框DOM元素，通过这个属性就能调用原生的focus()方法实现聚焦。使用可选链操作符?.可以避免元素未加载时出现报错。

内容的提问来源于stack exchange，提问作者Artur Carvalho