[Vue warn]: Error in event handler for "el.form.blur": "TypeError: callback is not a function"解决

callback的简单理解
调用一次callback相当于调用一次函数,比如:

function f(x) {
    console.log(x)
}
 
function testCallBack(callback) { //关键字callback,表示这个参数不是一个普通变量,而是一个函数
	const reg = /^[1-9]*[0-9]?(\\.[0-9]*)?$/;
  if(value==''||value==undefined||value==null){
    callback();//不传入任何函数名,相当于不执行任何函数
  }else{
    if (!reg.test(value)){
      callback(new Error('请输入正确的价格,保留两位小数'));//相当于执行new Error这个函数
    } else {
      callback(c);// 相当于以c作为参数调用函数,由下面的调用可知,这里执行的是f函数,因为我们传进来的函数名是f(),所以此行相当于调用一次f(c)
    }
  }
}
var c = 0
writeFile(f) // 函数f作为一个参数传进writeFile函数

下面进入正题,vue.esm.js?efeb:628 [Vue warn]: Error in event handler for “el.form.blur”: "TypeError: callback is not a function"的解决办法

vue中使用callback,如下使用会出现问题:
在这里插入图片描述在这里插入图片描述
callback作为第三个形参,问题可以解决,正确用法:

export function validateFloat(aaa,value,callback) {
  const reg = /^[1-9]*[0-9]?(\\.[0-9]*)?$/;
  if(value==''||value==undefined||value==null){
    callback();
  }else{
    if (!reg.test(value)){
      callback(new Error('请输入正确的价格,保留两位小数'));
    } else {
      callback();
    }
  }
}

综上,在vue.js中,callback的使用必须作为函数的第三个形参

`[Vue warn]` 错误提示出现在 Vue.js 开发者工具中,通常表示你在某个事件处理器中尝试访问了一个未定义的对象属性。错误信息 `TypeError: Cannot read properties of undefined (reading 'call')` 指示了试图调用某个对象的 `call()` 函数时遇到了 `undefined` 类型的问题。 在 Vue 中,当你使用 `v-model` 或其他组件 API 来绑定数据时,会创建一些内部状态管理器和函数。如果这个组件或数据绑定在特定条件(例如用户交互)下并未正确初始化或挂载,则可能会抛出这种错误。 具体来说,上述错误提示意味着你在处理表单元素的 `blur` 事件时,尝试对一个尚未被正确绑定到实际 DOM 元素的引用上执行 `call()` 方法。这可能是因为: 1. **DOM 加载延迟**:如果你的脚本在页面 DOM 完全加载之前运行,并尝试直接操作某些元素,此时这些元素可能是 `undefined` 的。 2. **异步组件**:当使用动态导入(async components)时,组件可能还没有完全加载好就尝试使用它。 3. **生命周期钩子问题**:如果错误发生在组件的生命周期钩子里(如 `mounted()`, `beforeMount()` 等),而组件还未完成初始化或渲染,可能导致引用的是空对象。 ### 解决方案 #### 验证 DOM 存在性 确保在尝试操作元素之前检查其是否存在: ```javascript document.querySelector('your-form-element').addEventListener('blur', yourEventHandler); ``` 或者在事件处理器内添加检查: ```javascript function yourEventHandler(event) { if (event.target && event.target.nodeName === 'YOUR-SPECIFIC-ELEMENT') { // 执行逻辑 } } ``` #### 使用 Vue 组件的特性 确保在 `created()` 或 `mounted()` 生命周期钩子中设置需要操作的数据或逻辑,避免在初始化阶段触发依赖。 #### 异步组件的处理 对于异步加载的组件,可以使用 `ref` 来获取组件实例,然后在其 `onMounted()` 生命周期钩子中执行所需的操作: ```javascript import YourAsyncComponent from '@/path/to/YourAsyncComponent.vue'; export default { name: 'MyComponent', async mounted() { const componentInstance = this.$refs.yourAsyncComponent; // 使用 componentInstance 进行后续操作 }, }; ``` #### 总结 理解错误发生的上下文并针对性地调整代码结构、等待必要的资源加载完毕或正确验证 DOM 对象的存在性,将有助于解决此类错误。 ---
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值