解决Vue watch里调用方法的坑


Posted in Javascript onNovember 07, 2020

这里是说watch调用methods里方法的时候,页面经常会报找不到方法

这个时候一定要在watch里去输出一下this,

看看this包裹的壳是不是多了好多层,所以找不到方法,虽然我到现在还没理解为啥有时候会出现一层或几层壳的问题。

例如

正常情况下用this.functionname()就可以调用了。

但是在一些情况下(现在本人还没找到原因)在控制台输出this的时候你会发现数据经常是这样包裹的a{name},name里面对你的methods还包裹了一层,所以使用方法的时候就会变成 this.a.methods.funtionname()

原因还在找,不过解决办法先记下来。

补充知识:使用 Vue 的最佳做法---不要在“created”和“watch”中调用方法

我就废话不多说了,大家还是直接看代码吧~

watch: { 
      params: {
        handler: function (val, oldVal) {
          if (val == '1') {
            this.initTableData()
          }
        },
        deep: true
      },
      property: {
        immediate: true,
        handler: function (val, oldVal) {
          this.initTableData()
        },
      },
    },

Vue开发人员经常犯的一个错误是他们不必要地在created和watch中调用方法。 其背后的想法是,我们希望在组件初始化后立即运行watch。

// 不好的做法 created: () { this.handleChange() }, methods: { handleChange() { // stuff happens } }, watch () { property() { this.handleChange() } }

但是,Vue为此提供了内置的解决方案,这是我们经常忘记的Vue watch属性。

我们要做的就是稍微重组watch并声明两个属性:

1.handler (newVal, oldVal)-这是我们的watch方法本身。

2. immediate: true- 代表如果在 wacth 里声明了之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样,不会在绑定的时候就执行

// 好的做法
methods: {
 handleChange() {
  // stuff happens
 }
},
watch () {
 property {
  immediate: true
  handler() {
   this.handleChange()
  }
 }
}

以上这篇解决Vue watch里调用方法的坑就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 创建快捷方式的代码(fso)
Nov 19 Javascript
js将long日期格式转换为标准日期格式实现思路
Apr 07 Javascript
用正则表达式替换图片地址img标签
Nov 22 Javascript
node.js使用nodemailer发送邮件实例
Mar 10 Javascript
简介JavaScript中Boolean.toSource()方法的使用
Jun 05 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
Oct 23 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 Javascript
详解JavaScript按概率随机生成事件
Aug 02 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
Oct 27 Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 Javascript
JS实现百度搜索框关键字推荐
Feb 17 Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 #Javascript
html+vue.js 实现漂亮分页功能可兼容IE
Nov 07 #Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 #Javascript
vue 避免变量赋值后双向绑定的操作
Nov 07 #Javascript
浅谈Vue static 静态资源路径 和 style问题
Nov 07 #Javascript
解决VueCil代理本地proxytable无效报错404的问题
Nov 07 #Javascript
Nuxt 项目性能优化调研分析
Nov 07 #Javascript
You might like
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
PHP闭包函数详解
2016/02/13 PHP
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
PNG背景在不同浏览器下的应用
2009/06/22 Javascript
jquery实现居中弹出层代码
2010/08/25 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
第二篇Bootstrap起步
2016/06/21 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
Python实现从脚本里运行scrapy的方法
2015/04/07 Python
Python实现把回车符\r\n转换成\n
2015/04/23 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
解决pip install psycopg2出错问题
2020/07/09 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
html如何对span设置宽度
2019/10/30 HTML / CSS
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
小学生美德少年事迹
2014/02/02 职场文书
写自荐信的注意事项
2014/03/09 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
领导班子奢靡之风查摆问题及整改措施
2014/09/27 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
学院党委班子四风问题自查报告及整改措施
2014/10/25 职场文书
运动会加油稿20字
2014/11/15 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python
Django分页器的用法你都了解吗
2021/05/26 Python
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS
Netty分布式客户端处理接入事件handle源码解析
2022/03/25 Java/Android