Vue3 setup函数中如何正确检测输入框的焦点状态？

核心思路 #

不要直接在计算属性里访问DOM元素的焦点状态，而是通过响应式变量跟踪焦点状态，结合输入框的focus/blur事件更新状态，再用这个状态控制下拉框的显示逻辑。

修改后的完整实现代码 #

模板部分

<input ref="postcode_input" 
       v-model="searchTerm"
       @focus="isInputFocused = true"
       @blur="isInputFocused = false"
       ...>
<!-- 下拉框通过计算结果+焦点状态控制显示 -->
<ul v-if="searchLocalities.length > 0 && isInputFocused">
  <li v-for="item in searchLocalities" :key="item.postcode" @click="selectPostcode(item)">
    {{ item.locality }} ({{ item.postcode }})
  </li>
</ul>

Script 部分

import { ref, computed } from 'vue'

export default {
  setup() {
    const searchTerm = ref('')
    const postcode_input = ref(null) // 关联DOM元素，后续如需直接操作DOM可使用
    const isInputFocused = ref(false) // 响应式变量跟踪焦点状态
    const selectedPostcode = ref('')
    // 假设postcodes是你的数据源ref
    const postcodes = ref([
      { locality: 'Sydney', postcode: '2000' },
      { locality: 'Melbourne', postcode: '3000' }
    ])

    const searchLocalities = computed(() => {
      // 仅当输入框聚焦且搜索词非空时，返回匹配结果
      if (searchTerm.value === '' || !isInputFocused.value) {
        return []
      }

      let matches = 0
      return postcodes.value.filter(locality => {
        const isMatch = locality.locality.toLowerCase().includes(searchTerm.value.toLowerCase())
        if (isMatch && matches < 10) {
          matches++
          return true
        }
        return false
      })
    })

    const selectPostcode = (location) => {
      selectedPostcode.value = location.postcode
      searchTerm.value = location.locality
      // 选中后主动隐藏下拉框
      isInputFocused.value = false
    }

    return {
      searchTerm,
      searchLocalities,
      postcodes,
      selectPostcode,
      selectedPostcode,
      isInputFocused,
      postcode_input
    }
  }
}

关键说明 #

• 响应式焦点状态：用isInputFocused替代直接访问DOM的focus属性，确保状态变化能触发Vue的响应式更新。
• 事件绑定：通过@focus和@blur直接修改状态，无需在onMounted里手动绑定事件（Vue会自动处理DOM挂载后的事件绑定）。
• 计算属性逻辑优化：把焦点状态加入判断条件，自然实现“失焦隐藏下拉框”的需求。
• 选中后处理：点击选项时主动设置焦点状态为false，确保下拉框立即隐藏。

之前方法报错的原因 #

你之前在onMounted里操作DOM可能存在写法问题，但核心问题是：计算属性依赖的必须是响应式变量，直接访问DOM元素的focus状态不是响应式的，Vue无法跟踪其变化，所以在computed里判断这个值不会触发正确的更新逻辑。

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