vue给data中已定义的变量用this赋值报错问题（TypeError: Cannot set property ‘catalogTable_body‘ of undefined）

问题描述

  下面是一个简单的文件上传功能，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;
                 
              }) 
            }, 
    
        }, 
    }

解决方案

使用一个变量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; 
              }) 
            }, 
        }, 
    }