Vue uses this assignment to the defined variable in data to report an error (TypeError: Cannot set property 'catalogTable_body' of undefined)

Problem Description

  下面是一个简单的文件上传功能，data里面申明的catalogTable_body，在下面的catalogUpload()函数里面用this调用的时候，会报错未定义catalogTable_body。
  这是因为用了 function函数的原因，在函数里面，this是指向函数本身，已经不是外部的默认this了。

export default {
    
    
        name: "catalog",
        data() {
    
    
            return {
    
    
               catalogTable_body:{
    
    },
               
            }
        }, 
        methods: {
    
    
          
            catalogUpload(e){
    
     
              let formData = new FormData(); 
              var ups=qs.parse(document.getElementById('chooseFile').value); 
              formData.append('file_data', e.target.files[0]);  
              let url = '/drugs/match/';
              let config = {
    
    
                headers:{
    
    'Content-Type':'multipart/form-data'}
              }; 
              this.$axios.post(url,formData, config).then(function (response) {
    
     
                var catalogTableBody=[];
                for(var i=1;i<response.data.Sheet1.length;i++){
    
    
                  catalogTableBody.push(response.data.Sheet1[i]); 
                } 
                this.catalogTable_body = catalogTableBody;
                 
              }) 
            }, 
    
        }, 
    }

solution

使用一个变量that 指向外部的this ，然后调用 that.catalogTable_body 。

export default {
    
    
        name: "catalog",
        data() {
    
    
            return {
    
    
               catalogTable_body:{
    
    },                
            }
        }, 
        methods: {
    
     
            catalogUpload(e){
    
     
              let formData = new FormData(); 
              var ups=qs.parse(document.getElementById('chooseFile').value); 
              formData.append('file_data', e.target.files[0]);  
              let url = '/drugs/match/';
              let config = {
    
    
                headers:{
    
    'Content-Type':'multipart/form-data'}
              };
               const that=this; //用that变量解决函数内部this指向问题 
              this.$axios.post(url,formData, config).then(function (response) {
    
     
                var catalogTableBody=[];
                for(var i=1;i<response.data.Sheet1.length;i++){
    
    
                  catalogTableBody.push(response.data.Sheet1[i]); 
                } 
                that.catalogTable_body = catalogTableBody; 
              }) 
            }, 
        }, 
    }