VTextField组件Blur事件未触发问题求助

针对你遇到的VTextField绑定blur事件无响应的问题，给你几个可行的排查和解决方向：

• 绑定原生blur事件
  Vuetify的VTextField是封装后的组件，直接用@blur可能监听的是组件自定义事件而非原生DOM事件，添加.native修饰符即可监听原生blur：

<v-text-field
  v-model="minutes"
  class="time-box"
  placeholder="--"
  @blur.native="setHoursOrMinutes($event)"
  @focus="clearValue($event.target)"
  @input="checkValue($event)"
/>

• 换用focusout事件
  如果.native修饰符无效，可以尝试监听原生focusout事件（同样需要.native），它和blur的区别是focusout会在元素及其子元素失去焦点时都触发，兼容性更好：

@focusout.native="setHoursOrMinutes($event)"

• 检查处理函数是否正常
  确认setHoursOrMinutes方法已经在组件的methods中正确定义，参数接收没有问题，比如：

methods: {
  setHoursOrMinutes(event) {
    // 你的处理逻辑
    console.log('blur触发了', event)
  }
}

• 排查页面交互干扰
  如果页面上有弹窗、下拉框等元素在文本框失焦时快速获取焦点，可能会导致blur事件被屏蔽，这种情况可以测试在空白区域点击看是否触发blur，或者调整交互逻辑。

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