zoukankan      html  css  js  c++  java
  • xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

    vue & lifecycle methods & this bug

    image


    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);
                }
            }); 
        },
    
  • 相关阅读:
    基于CodeSmith的三层架构代码模板
    全自动时代:JavaScript自动压缩插件
    NServiceBus最流行的开源企业服务总线 for .Net
    神奇的东西
    WebMatrix
    .Net TDD我用Machine.Specification
    JQuery Smart UI 简介(四) — 强大的适用性&存在问题【项目使用性介绍】
    JQuery Smart UI 简介(三)
    JQuery Smart UI 简介(二)
    基于WCF大型分布式系统的架构设计
  • 原文地址:https://www.cnblogs.com/xgqfrms/p/9956267.html
Copyright © 2011-2022 走看看