vue watch报错:Error in callback for watcher "xxx":"TypeError的解决方法

一、问题

1.监听了一个data里面的对象竟然报错了，错误还奇奇怪怪的：不能在 undefined上使用 apply方法

1）详细错误如下：

vue.esm.js?9b69:5059 [Vue warn]: Error in callback for watcher "flowCategory": "TypeError: Cannot read properties of undefined (reading 'apply')"
 
found in
 
---> <FlowItem> at src/projects/comen/implemenceWorkstation/flowSetting/FlowItem.vue
       <ElTabPane> at packages/tabs/src/tab-pane.vue
         <ElTabs> at packages/tabs/src/tabs.vue
           <View> at src/views/implemenceWorkstation/flowSetting/view.vue
             <Index> at src/layout/index.vue
               <App> at src/App.vue
                 <Root>
warn$2 @ vue.esm.js?9b69:5059
logError @ vue.esm.js?9b69:3728
globalHandleError @ vue.esm.js?9b69:3724
handleError @ vue.esm.js?9b69:3691
invokeWithErrorHandling @ vue.esm.js?9b6

2）代码如下：

  watch: {
    flowCategory: {
      hanlder(newval, oldval) {
        console.log('flowCategory', newval, oldval);
      },
      deep: true
    }
  }

二、解决方法

 1.是不是看着上面的代码没问题，我也是很自信，不就是在handler函数中打印了变化前后的值吗？写法就是这样啊，我也是这样自信。

2.找了半天发现自己 把 handler 这个单词写错了 ，敲错了写成'hanlder“了，ide也没有提示 &***&

  改成下面这样就可以了

  watch: {
    flowCategory: {
      handler(newval, oldval) {
        console.log('flowCategory', newval, oldval);
      },
      deep: true
    }
  }

3.现在终于明白报错：是为了告诉我们handler出问题了，watch不知道监听到变化时要干什么。

三、总结

1.报上面这个错误表示handler函数写的有问题。你可以检查以下几点： 

   1)handler函数有没有写

   2)handler有没有拼写正确（虽然有点愚蠢，但是我今天确实是因为这个……）

   3)handler函数不能是箭头函数（this指向变化后,apply也是有问题的）

2.啊，愚蠢的我。

到此这篇关于vue watch报错:Error in callback for watcher “xxx“:“TypeError:Cannot read properties of undefined解决的文章就介绍到这了,更多相关vue watch报错Error in callback for watcher “xxx“内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论