vue watch 中找不到this

最新推荐文章于 2024-02-20 10:46:19 发布
最新推荐文章于 2024-02-20 10:46:19 发布
阅读量5.1k 收藏 1
点赞数 3
分类专栏： vue 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mushroomLNL/article/details/124145532
版权

watch中想要监听vuex中的数据

//监听vuex中path的变化
    "$store.state.path":function(value){
      this.parentRoute = value
    }

要想在监听的数据中获取到this指向vm

在watch中如果想要获取到this指向vm , 就必须用function , 而不能使用箭头函数 , 因为箭头函数中的this 指向的是外层函数中的this , 虽然watch中this默认指向vm , 但是箭头函数并不能获取到this指向vm

在这里插入图片描述

不为霜停
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue侦听器watch获取this报undefined
木荣小逗比
01-08 1958
错误代码 watch: { data: { handler: (newVal) => { this.info = newVal }, deep: true } }, 修正后代码 watch: { data: { handler: function (newVal) { this.info = newVal }, ...
【Vue项目】watch中为什么取不到this？？？
feng的博客
08-17 1300
箭头函数绑定了父级作用域的上下文，从而不会拿到Vue实例。所以在使用watch设置监听的时候，handler函数不应该使用箭头函数。运行结果：Error "$nextTick" ........输出一下this，发现是undefined。1.问题重现：先来看下这段代码。
watch中this指向
最新发布
weixin_72329752的博客
02-20 400
【代码】watch中this指向。
Vue中侦听器watch时，调用this时出现undefined问题
believet93的博客
07-17 1384
1、问题描述 watch: { list: (newV, oldV) => { this.projectList = newV; } } 按照上述写法，运行时出现undefined，这里错误的原因是使用了箭头函数。 2、解决方法 watch: { list: function(newV, oldV) { this.projectList = n...
vue中watch监听变量变化时this指向问题
Li_Sen_的博客
04-09 8798
错误原因分析 这儿我们要搞清楚es6中箭头函数的特殊之处。箭头函数自动绑定了上下文对象到this中。那么就说明我们在箭头函数中引用的this不再是vue实例。 使用普通函数时this才是vueComponent对象。所以大家在使用es6特性的时候一定要注意。在vue的内部一定要注意箭头函数对于this对象的影响。当然如果你非要使用箭头函数也是可以的，我们通常的一个做法是在组件data函数中中定义v...
vue视图响应-watch
Vanessa_Li的博客
11-01 504
数据改变（vue视图上的数据能渲染成功）时会触发对应的监听器watch。vue提供了watch方法，用于监听实例内data数据的变化。
Vue watch 中 this 注意事项
liubangbo的专栏
03-26 8794
在watch中使用this要注意，不能用箭头函数，否则会出错，例如： <template> </template> <script> export default{ data(){ return { isLogin: false } }, watch:{ isLogin: (newVal, oldVal) => { newVal && this.updateLogin() } },
vue监听属性watch中this指向报错
qq_42994986的博客
07-28 920
阿斯达
Vue中watch用法
weixin_43203982的博客
06-07 177
第一种方式 <input type="text" v-model="userName"/> //监听当userName值发生变化时触发 watch: { userName (newName, oldName) { console.log(newName) } } 第一种方式有一个缺点： 就是当值第一次绑定的时候 不会执行监听函数，只有当值改变的时候才会执行。 如果我们想在第一次绑定的时候执行此监听函数，则需要设置immediate为true。比如当父组件向子组件动态传值时，子组件
vue中的watch和$watch的用法实际场景和区别
m0_56347363的博客
10-30 923
3，watch_WX_DialogVisible这方法使用了 $watch，作用是监听 dialogVisible 属性。，使用 $watch 可以解决。过度使用 $watch 可能会导致性能问题，，在这种情况下，你可能需要考虑其他解决方案，比如使用计算属性或者只对特定的数据使用 $watch。2，关于为什么 watch_WX_DialogVisible方法没有写在 watch: 里，而是使用 $watch？1.Vue 中，$watch 是一个用于深度观察一个对象或者一个 Vue 实例属性的方法。
vue watch用法
qq_23064501的博客
06-25 189
1、基本用法，watch 的方法默认是不会执行的，只有当监听数据变化，才会执行。通过声明immediate 选项为 true，可以立即执行一次 handler。 <template> <div> <el-input v-model="demo"></el-input> {{value}} </div> &l...
解决Vue watch里调用方法的坑
01-18
这里是说watch调用methods里方法的时候，页面经常会报找不到方法 这个时候一定要在watch里去输出一下this， 看看this包裹的壳是不是多了好多层，所以找不到方法，虽然我到现在还没理解为啥有时候会出现一层或几层壳...
vue 子组件watch监听不到prop的解决
01-21
在vue项目中，父组件通过prop给子组件传值时，如果prop值是从服务器端获取，则父组件可能会传给子组件一个默认值(服务端数据还未及时获取)，那么，我们就需要实时watch这个prop值，一旦prop值有更新，将立即通知子...
Vue2.0用 watch 观察 prop 变化(不触发)
12-11
本文介绍了Vue2.0用 watch 观察 prop 变化(不触发)，分享给大家，具体如下： A 组件： export default { props:{ name:{ type:String } }, data () { return { author: "Jinkey" } }, mounted:function...
解决Vue2.0 watch对象属性变化监听不到的问题
12-01
发现子组件使用deep watch都不能观察到对象中属性的变化，今天终于找到为啥出现这种问题和解决办法了。 解决 为啥出现这种问题？受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。 请参照...
解决vue2 在mounted函数无法获取prop中的变量问题
12-03
如下所示； props: { ...以上所述是小编给大家介绍的解决vue2 在mounted函数无法获取prop中的变量问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大
Vue中侦听器watch时，调用this时出现undefined问题 侵删
心神沫沫的收藏
07-08 1867
watch侦听器中，我们要将新的值赋给this.a出错 watch: { value: (newV, oldV) => { this.a = newV; } } 这里报错undefined，这里错误的原因是不能写成箭头函数。写成箭头函数后，this会取上下文，而不是组件里面的this了，正确写法为： watch: { value: function...
typescript vuex_优雅的在vue中使用TypeScript
weixin_39726697的博客
10-21 491
引言近几年前端对 TypeScript的呼声越来越高，Typescript也成为了前端必备的技能。TypeScript 是 JS类型的超集，并支持了泛型、类型、命名空间、枚举等特性，弥补了 JS 在大型应用开发中的不足。在单独学习 TypeScript时，你会感觉很多概念还是比较好理解的，但是和一些框架结合使用的话坑还是比较多的，例如使用 React、Vue 这些框架的时候与 TypeScript...
vue this.$watch 找不到对象
06-11
如果你在使用 Vue 的 `this.$watch` 方法时找不到对象，可能是因为你在调用它的时候还没有创建该对象。请确保在调用 `$watch` 方法之前已经创建了该对象并将其设置为 Vue 实例的属性。另外，还要确保在创建该对象时，它已经包含了你想要监视的属性。 如果你还是无法解决问题，可以提供更多的代码和错误信息，这样我才能更好地帮助你解决问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值