[Solved] vue watch Error: Error in callback for watcher “xxx“: “TypeError: Cannot read properties of undefined …

 

1. Question

1. Listening to an object in data, an error is reported. The error is strange: you cannot use the apply method on undefined

1) detailed errors are as follows:

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) the code is as follows:

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

2. Solution:

After searching for a long time, I found that I had written the word “handler” incorrectly. I typed it incorrectly and wrote it as “hanlder”, and the IDE did not prompt  &***&;

Change it to the following. That’s all

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

3. Now we finally understand the error reporting: it is to tell us that the handler has a problem. The watch does not know what to do when monitoring changes.

Read More: