Vueピット-axiosデータ付与エラーUncaut(in promise)TypeError:Cannot set property'mes'of undefined


最近vueに入門していますが、axiosリクエストで返されたデータをdataのデータ項目に割り当てる必要があります.dataのデータ項目はページに双方向にバインドされてレンダリングされます.
ただし、コールバック関数で値を割り当てるときにエラーが発生しました.元のコードは次のとおりです.
methods:{
     
     tijiao(){
     
         this.axios({
     
             method:'post',
             params:
                 {
     
                   yhm:this.yhm,
                   pwd:this.pwd
                    },
             url:'http://localhost:1111/01/zhuce'
           }).then(function(resp){
     
                console.log(resp.data);
                this.mes=resp.data;  
               })
            }
        }

実行時に、データは要求できますが、TypeError: Cannot set property ‘listgroup’ of undefinedとエラーが発生します.つまり、要求されたデータはdataのデータ項目にバインドできません.
エラーの原因
.then(function(resp){
     
	console.log(resp.data);
    this.mes=resp.data;   //    
     })

thenでは function callbackなので、コールバック関数ではthis HTTP request event, vue になります.
解決策
1、ES 6矢印関数で、矢印方法は外部のvueオブジェクトと変数を共有することができる
methods:{
     
     tijiao(){
     
         this.axios({
     
             method:'post',
             params:
                 {
     
                   yhm:this.yhm,
                   pwd:this.pwd
                     },
             url:'http://localhost:1111/01/zhuce'
            }).then(resp=>{
             //      
                    console.log(resp.data);
                    this.mes=resp.data;
                })
            }
        }

関数functionが役割ドメインを遮断することを回避します.
2、thatを使用して外部を指すthis
methods:{
     
     tijiao(){
     
         var that=this;    //  that      this( vue  )
         this.axios({
     
             method:'post',
             params:
                 {
     
                   yhm:this.yhm,
                   pwd:this.pwd
                   },
             url:'http://localhost:1111/01/zhuce'
          }).then(function(resp){
     
                console.log(resp.data);
                this.mes=resp.data;
                })
            }
        }