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 2 lifecycle

https://v2.vuejs.org/v2/api/#Options-Lifecycle-Hooks

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---