vue & lifecycle methods & this bug & ES6 Arrow function & this bind bug
vue & lifecycle methods & this bug

ES6 Arrow function & this bind bug
bad
fetchTableData: (url = ``, options = {}) => {}
// arrow function & this bind bug!
// fetchTableData: (url = ``, options = {}) => {
fetchTableData (url = ``, options = {}) {
// fetchTableData
// return Promise && async await
// let url = "http://10.1.5.202/es6-test/axios/preview-user.new.json";
if (!url) {
url = "http://10.1.5.202/es6-test/axios/preview-user.new.json";
}
let that = this;
console.log(`this =`, this);
console.log(`that =`, that);
// console.log(`this.a.data =`, this.a.data);
// Axios.post(url, options)
Axios.get(url)
.then((res) => {
let {
data: json
} = res;
if (json.data.length) {
// that.a.data.totalPage = json.data.length;
// that.a.data.allDatas = json.data;
// // pagination
// that.a.data.table = that.a.methods.getPaginationData(that.a.data.allDatas, that.a.data.currentPage, that.a.data.pageSize);
// that.$data.totalPage = json.data.length;
// that.$data.allDatas = json.data;
// // pagination
// that.$data.table = that.getPaginationData(that.$data.allDatas, that.$data.currentPage, that.$data.pageSize);
this.$data.totalPage = json.data.length;
this.$data.allDatas = json.data;
// pagination
this.$data.table = this.getPaginationData(this.$data.allDatas, this.$data.currentPage, this.$data.pageSize);
}
});
},
ES6 & class methods
OK
showInitTableData(url = ``) {
console.log(`init this =`, this);
Axios.get(url)
.then((res) => {
let {
data: json
} = res;
if (json.data.length) {
this.$data.totalPage = json.data.length;
this.$data.allDatas = json.data;
// pagination
this.$data.table = this.getPaginationData(this.$data.allDatas, this.$data.currentPage, this.$data.pageSize);
}
});
},
vue & lifecycle methods & this bug & ES6 Arrow function & this bind bug的更多相关文章
- ES6 Arrow Function & this bug
ES6 Arrow Function & this bug let accHeadings = document.querySelectorAll(`.accordionItemHeading ...
- ES6 Arrow Function All In One
ES6 Arrow Function All In One this const log = console.log; const arrow_func = (args) => log(`arg ...
- ES6 arrow function vs ES5 function
ES6 arrow function vs ES5 function ES6 arrow function 与 ES5 function 区别 this refs xgqfrms 2012-2020 ...
- ES6 Arrow Function return Object
ES6 Arrow Function return Object https://github.com/lydiahallie/javascript-questions/issues/220#issu ...
- arrow function and bind
Can you bind arrow functions? https://stackoverflow.com/questions/33308121/can-you-bind-arrow-functi ...
- ES6 arrow function
语法: () => { … } // 零个参数用 () 表示: x => { … } // 一个参数可以省略 (): (x, y) => { … } // 多参数不能省略 (): 当 ...
- [ES6] 06. Arrow Function =>
ES6 arrow function is somehow like CoffeeScirpt. CoffeeScript: //function call coffee = -> coffee ...
- js arrow function return object
js arrow function return object bug filterData: { type: Object, default: () => {}, required: true ...
- bind & this & new & arrow function
bind & this & new & arrow function this bind call apply new arrow function arrow functio ...
随机推荐
- 数据库可视化工具简介以及pymysql的使用
1.可视化工具Navicat 我们自己开发测试时,可以使用该可视化工具,以图形界面的形式操作数据库 在生产环境中,为了显示自己的逼格,一般不建议使用它 官网下载:https://www.navicat ...
- angular2中一种换肤实现方案
思路:整体思路是准备多套不同主题的css样式.在anguar项目启动时,首先加载的index.html中先引入一套默认的样式.当我们页面有动作时再切换css. 可以通过url传参触发,也可以通过bu ...
- SQL基础语句汇总
连接数据库 1 mysql -h10.20.66.32 -uroot -p123456 -h后面是mysqlServer所在地址,-u后面是用户名,-p后面是密码 查看数据库 1 show datab ...
- ES6学习(三):数组的扩展
chapter08 数组的扩展 8.1 扩展运算符 8.1.1 扩展运算符的含义 ... 如同rest运算符的逆运算,将一个数组转换为用逗号分隔的参数序列. console.log(...[1, 2, ...
- 【例题收藏】◇例题·II◇ Berland and the Shortest Paths
◇例题·II◇ Berland and the Shortest Paths 题目来源:Codeforce 1005F +传送门+ ◆ 简单题意 给定一个n个点.m条边的无向图.保证图是连通的,且m≥ ...
- LeetCode977. 有序数组的平方
问题:977. 有序数组的平方 给定一个按非递减顺序排序的整数数组 A,返回每个数字的平方组成的新数组,要求也按非递减顺序排序. 示例 1: 输入:[-4,-1,0,3,10] 输出:[0,1,9,1 ...
- linux系统的启动过程简要分析
接触linux系统运维已经好几年了,常常被问到linux系统启动流程问题,刚好今天有空来梳理下这个过程:一般来说,所有的操作系统的启动流程基本就是: 总的来说,linux系统启动流程可以简单总结为以下 ...
- MySQL字段属性介绍
引言 这次Qi号分享MySQL字段属性简介.下面资料是Qi号搜集大量资料与个人理解的整理. MySQL提供了一组可以赋给表中各个列的数据类型,每个类型都强制数据满足为该数据类型预先确定的一组规则,例如 ...
- 722. Remove Comments
class Solution { public: vector<string> removeComments(vector<string>& source) { vec ...
- c语言可变参数函数
c语言支持可变参数函数.这里的可变指,函数的参数个数可变. 其原理是,一般情况下,函数参数传递时,其压栈顺序是从右向左,栈在虚拟内存中的增长方向是从上往下.所以,对于一个函数调用 func(int a ...