Vue中使用$refs控制焦点报错：Cannot read property 'focus' of undefined

嘿，我来帮你搞定这个问题！你遇到的TypeError: Cannot read property 'focus' of undefined主要有两个核心原因，咱们一步步拆解：

错误根源 #

1. 计算属性执行时机不对
   你的openTest计算属性会在组件初始化渲染阶段就执行，这时候组件的DOM还没完全挂载完成，$refs.FocusOrderDelivery还没被Vue创建出来，直接调用focus()自然会报错说它是undefined。

2. 对focus()返回值的误解
   浏览器原生的focus()方法是没有返回值的（它不会返回true或false），所以你用this.$refs.FocusOrderDelivery.focus() == true来判断完全不成立，这本身就是逻辑错误。

修复后的代码示例 #

咱们调整代码解决这两个问题：

<template>
  <button @click="retFalse"> barcode {{ openTest }} </button>
  <input class="nothing" ref="FocusOrderDelivery" />
</template>

<script>
export default {
  computed: {
    openTest() {
      // 先判断元素是否存在，再检查它是否是当前获取焦点的元素
      const inputElement = this.$refs.FocusOrderDelivery;
      return inputElement && document.activeElement === inputElement;
    }
  },
  methods:{
    retFalse() {
      // 调用focus前先确保元素存在，避免报错
      const inputElement = this.$refs.FocusOrderDelivery;
      if (inputElement) {
        inputElement.focus();
      }
    }
  }
}
</script>

额外优化建议 #

• 如果需要在组件挂载完成后自动让输入框获取焦点，可以在mounted钩子中处理：

  mounted() {
    this.$nextTick(() => {
      // 用可选链操作符简化存在性判断
      this.$refs.FocusOrderDelivery?.focus();
    });
  }
  

  $nextTick能确保DOM已经完全渲染完成，可选链?.可以避免因元素未加载导致的报错。

• 你的输入框里的href="javascript:void(0)"是多余的，input标签没有这个属性，直接删掉就好啦。

内容的提问来源于stack exchange，提问作者Mm.Mirzaei.dev