解决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 相关文章推荐
Ctrl+Enter提交内容信息
Jun 26 Javascript
父子窗体间传递JSON格式的数据的代码
Dec 25 Javascript
javascript递归回溯法解八皇后问题
Apr 22 Javascript
jqTransform美化表单
Oct 10 Javascript
AngularJS基础 ng-click 指令示例代码
Aug 01 Javascript
jQuery操作json常用方法示例
Jan 04 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
React 子组件向父组件传值的方法
Jul 24 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
Sep 13 Javascript
浅谈vuex 闲置状态重置方案
Jan 04 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
js观察者模式的弹幕案例
Nov 23 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
php5 图片验证码实现代码
2009/12/11 PHP
PHP实现通用alert函数的方法
2015/03/11 PHP
基于PHP生成简单的验证码
2016/06/01 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
使用JavaScript和C#中获得referer
2014/11/14 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
13个PHP函数超实用
2015/10/21 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
2017/04/13 Javascript
用Nodejs搭建服务器访问html、css、JS等静态资源文件
2017/04/28 NodeJs
基于JSON数据格式详解
2017/08/31 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
python解析xml文件操作实例
2014/10/05 Python
python访问系统环境变量的方法
2015/04/29 Python
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
python实现两个文件合并功能
2018/04/01 Python
使用Python快速制作可视化报表的方法
2019/02/03 Python
Django ORM判断查询结果是否为空,判断django中的orm为空实例
2020/07/09 Python
python如何绘制疫情图
2020/09/16 Python
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
艺术设计专业个人求职信范文
2013/12/11 职场文书
优秀党支部事迹材料
2014/01/14 职场文书
委托书的写法
2014/09/16 职场文书
幼儿园小班个人工作总结
2015/02/12 职场文书
高三化学教学反思
2016/02/22 职场文书
Python访问Redis的详细操作
2021/06/26 Python
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis
Nginx流量拷贝ngx_http_mirror_module模块使用方法详解
2022/04/07 Servers
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android