Vue.js中输入框@blur仅触发一次？如何实现每次失焦都调用方法

可能原因及对应解决方法 #

1. 错误状态下禁用了输入框 #

如果校验失败后，你给v-text-field添加了disabled或readonly属性，会直接导致输入框无法响应后续的焦点事件。比如：

<!-- 错误示例：禁用输入框会阻止blur事件触发 -->
<v-text-field 
  label="Username" 
  v-model="username" 
  @blur="checkUsername"
  :disabled="hasUsernameError"
></v-text-field>

解决：移除disabled/readonly绑定，仅通过提示文案或样式标记错误，不要禁用输入框的交互功能。

2. Vuetify组件封装导致事件未传递 #

v-text-field是封装后的组件，内部可能对blur事件做了处理，导致自定义的监听器没有绑定到原生input元素上。
解决：使用.native修饰符绑定原生焦点事件：

<v-text-field label="Username" v-model="username" @blur.native="checkUsername"></v-text-field>

或者改用原生focusout事件的原生绑定：

<v-text-field label="Username" v-model="username" @focusout.native="checkUsername"></v-text-field>

3. 错误提示组件干扰焦点 #

如果错误提示是弹窗、浮层或自动获取焦点的元素，可能会在首次失焦后劫持焦点，导致后续输入框失焦时，焦点并没有真正离开输入框（或事件被其他元素捕获）。
解决：检查错误提示组件的实现，移除自动获取焦点的逻辑（比如autofocus属性），确保焦点可以正常在输入框和页面其他元素间切换。

4. 异步请求或状态阻塞 #

如果checkUsername中的服务器请求未正确处理（比如未捕获错误、请求未完成时阻塞了状态更新），可能间接导致事件绑定失效。
解决：在请求中添加错误捕获，并确保状态更新是响应式的：

async checkUsername(){
  if (!this.username) return;
  try {
    const res = await axios.post('/api/check-username', { username: this.username });
    this.hasUsernameError = res.data.exists;
  } catch (err) {
    console.error('校验失败:', err);
    // 即使请求失败，也要确保状态正常，避免阻塞后续交互
    this.hasUsernameError = false;
  }
}

5. 调试定位事件触发情况 #

如果以上方法都无效，添加日志确认事件是否触发：

<v-text-field 
  label="Username" 
  v-model="username" 
  @blur="() => { console.log('blur事件触发'); checkUsername() }"
></v-text-field>

同时在checkUsername方法开头添加日志：

checkUsername(){
  console.log('checkUsername执行');
  // ... 原有逻辑
}

如果控制台只输出blur事件触发但没输出checkUsername执行，说明方法可能被意外覆盖；如果两者都没输出，说明事件根本没触发，回到前两点排查。

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