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的更多相关文章

  1. ES6 Arrow Function & this bug

    ES6 Arrow Function & this bug let accHeadings = document.querySelectorAll(`.accordionItemHeading ...

  2. ES6 Arrow Function All In One

    ES6 Arrow Function All In One this const log = console.log; const arrow_func = (args) => log(`arg ...

  3. ES6 arrow function vs ES5 function

    ES6 arrow function vs ES5 function ES6 arrow function 与 ES5 function 区别 this refs xgqfrms 2012-2020 ...

  4. ES6 Arrow Function return Object

    ES6 Arrow Function return Object https://github.com/lydiahallie/javascript-questions/issues/220#issu ...

  5. arrow function and bind

    Can you bind arrow functions? https://stackoverflow.com/questions/33308121/can-you-bind-arrow-functi ...

  6. ES6 arrow function

    语法: () => { … } // 零个参数用 () 表示: x => { … } // 一个参数可以省略 (): (x, y) => { … } // 多参数不能省略 (): 当 ...

  7. [ES6] 06. Arrow Function =>

    ES6 arrow function is somehow like CoffeeScirpt. CoffeeScript: //function call coffee = -> coffee ...

  8. js arrow function return object

    js arrow function return object bug filterData: { type: Object, default: () => {}, required: true ...

  9. bind & this & new & arrow function

    bind & this & new & arrow function this bind call apply new arrow function arrow functio ...

随机推荐

  1. Eclipse 修改默认工作空间

    第一次启动Eclipse时会弹出对话框,让你进行Workspace Launcher,也就是设置Eclipse的项目存放路径.但是,当你勾选“Use this as the default and d ...

  2. Java框架 面试题总结

    一. Struts1.x 4 1. struts1优缺点,为什么要使用struts1 4 2. Struts1核心组件 4 3. Strust1请求处理流程  工作原理 4 4. Struts1线程安 ...

  3. lintcode_115_不同的路径 II

    不同的路径 II   描述 笔记 数据 评测 "不同的路径" 的跟进问题: 现在考虑网格中有障碍物,那样将会有多少条不同的路径? 网格中的障碍和空位置分别用 1 和 0 来表示. ...

  4. Java中如何输入一个字符

    今天在QQ群上看见有人问如何在Java中输入一个字符的问题. 查了下有以下三种方法吧: char c = new java.util.Scanner(System.in).next().charAt( ...

  5. python 计算提成代码

    while True: with open('8564.txt') as f: r = f.readlines() start = input("请输入要查询的日期,例如20180101 : ...

  6. MySQL另类的备份恢复方法——innodb可传输表空间

      Preface       There're many ways in backing up or migrating data from one server to another one.Lo ...

  7. Servlet学习笔记06——什么是转发,路径,状态管理?

    1.include指令 (1)作用: 告诉容器,在将jsp转换成Servlet时,将 某个文件的内容插入到该指令所在的位置. (2)语法: <%@ include file="&quo ...

  8. Shell学习——Shell分类:登录shell和非登陆shell 交互shell和非交互shell

    1.从两个不同维度来划分,是否交互式,是否登录 2.交互式shell和非交互式shell 交互式模式:在终端上执行,shell等待你的输入,并且立即执行你提交的命令.这种模式被称作交互式是因为shel ...

  9. 事件监听和window.history以及自定义创建事件

    1.事件监听window.addEventListener方法: Window.addEventListener(event, function, useCapture); useCapture:表示 ...

  10. Uncaught Error: Script error for "popper.js", needed by: bootstrap - require.js

    Uncaught Error: Script error for "popper.js", needed by: bootstrap https://requirejs.org/d ...