vue的watch监听器里面如果使用箭头函数需谨慎

小灰灰 2023-10-04 20:14 35阅读 0赞

![eb82377263b24f2286d8da53298fd41e.png][]

vue.runtime.esm.js:587 \[Vue warn\]: Error in callback for watcher "form.psiType": "TypeError: Cannot read properties of undefined (reading 'form')"

错误代码如下：使用watch监听form表单下面的psiType，后面跟了一个箭头函数

![d3db87a7acdf48a8996406f9a5f70c6a.png][]

#### 错误原因分析： ####

'form.psiType': (newV, oldV) => \{ \} 会报错，因为箭头函数里面的this指向出错，箭头函数里面的this指向上下文中的this，但是watch里面后面的箭头函数没有上下文调用，所以就出现了undefined，应该改成 'form.psiType': function(newV, oldV) \{ \}

#### 正确代码如下： ####

watch: {
        'form.psiType': function(newV, oldV) {
          console.log('newV,oldV---', newV, oldV)
          if (newV === 'OPRF') {
            console.log('done---', this.form.remoteDataSetId)
            this.form.remoteDataSetId.forEach(item => {
              item.columnIn = []
            })
          }
          console.log('done---')
        }
      },

[eb82377263b24f2286d8da53298fd41e.png]: https://img-blog.csdnimg.cn/eb82377263b24f2286d8da53298fd41e.png
[d3db87a7acdf48a8996406f9a5f70c6a.png]: https://img-blog.csdnimg.cn/d3db87a7acdf48a8996406f9a5f70c6a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，35人围观）

还没有评论，来说两句吧...

相关阅读

相关 watch | 监听器、computend

区别：功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前

╰半夏微凉°/ 2024年04月03日 07:20/ 0 赞/ 44 阅读

相关 vue的watch监听器里面如果使用箭头函数需谨慎

![eb82377263b24f2286d8da53298fd41e.png][] vue.runtime.esm.js:587 \[Vue warn\]: Error in

小灰灰/ 2023年10月04日 20:14/ 0 赞/ 36 阅读

相关 vue-06-watch监听器

watch监听器，我把它分为两部分来看待，第一部分是，在组件内部监听组件内部属性的变化。第二部分，则是在父子组件传值的时候，监听父组件传递到子组件的值。 1、组件内部的属性监

拼搏现实的明天。/ 2023年07月25日 14:13/ 0 赞/ 12 阅读

相关 Vue中的watch使用

watch和computed很相似，watch用于观察和监听页面上的vue实例，当然在大部分情况下我们都会使用computed，但如果要在数据变化的同时进行异步操作或者是比较大

淩亂°似流年/ 2022年09月05日 06:12/ 0 赞/ 240 阅读

相关箭头函数的使用

箭头函数的使用基本用法为什么要有箭头函数和普通函数的区别不绑定this 不绑定arguments 什么时候不能用

一时失言乱红尘/ 2022年02月21日 15:45/ 0 赞/ 343 阅读

相关箭头函数里面的this理解

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

野性酷女/ 2022年01月20日 14:07/ 0 赞/ 261 阅读

相关 vue的watch函数，computed函数

watch 和 computed的区别： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

喜欢ヅ旅行/ 2022年01月05日 06:59/ 0 赞/ 287 阅读

相关 vue watch的使用

在vue中，使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法：复制代码 new Vue(\{ el: '\root', da

墨蓝/ 2021年09月18日 07:54/ 0 赞/ 354 阅读

相关 VUE中不能使用箭头函数的地方

1.不应该使用箭头函数来定义一个生命周期方法 2.不应该使用箭头函数来定义 method 函数 3.不应该使用箭头函数来定义计算属性函数 4.不应该对 data 属

超、凢脫俗/ 2021年07月25日 17:57/ 0 赞/ 318 阅读

相关 watch监听器

普通监听和对数组或者对象的深度监听： <!DOCTYPE html> <html lang="en"> <head> <meta

淩亂°似流年/ 2021年07月25日 02:30/ 0 赞/ 400 阅读