xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

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);
            }
        }); 
    },