vue中this的针对难题,vue使用axios贰次相应的难题

作者: 韦德国际1946国际网址  发布:2019-06-03

前言

一.化解办法

在vue中使用axios做互连网请求的时候,会赶上this不指向vue,而为undefined,能够运用箭头函数"=>"来化解。如下:

methods: {
      loginAction(formName) {
        this.$axios.post('http://127.0.0.1/u/subLogin', {
          username: this.username,
          password: this.password
        })
          .then(function(response){
               console.log(this); //这里 this = undefined
          })
          .catch((error)=> {
            console.log(error); //箭头函数"=>"使this指向vue
          });

        });
      }
}

vue中this的针对难题,vue使用axios贰次相应的难题。在函数中要求遍历数组等对象时,遍历中的this会指向window,所以须求在遍历前定义一下this指向

壹张开浏览器 首先是报错 数据尚未请求回来,可是刷新之后 就不报错了 数据也回复了,那是自家放在生命周期里的操作,然后自身不放在生命周期里,我把请求挂在到@click点击事件里后,壹张开浏览器不会报错,数据也会在点击后呼吁过来。

远近闻名axios是vue-resource前面世的Vue请求数据的插件。vue更新到贰.0随后,小编尤大就发布不再对vue-resource更新,而是推荐的axios。更加多的详细介绍大家能够参见这里://www.jb51.net/article/109444.htm

2. 原因

ES6中的 箭头函数 "=>" 内部的this是词法成效域,由上下文分明(也便是由外层调用者vue来鲜明)。

data(){
    return {
        arr:[{num:1},{num:2},{num:3}],
        n:0
    }
},
methods:{
    show(){
        var _this = this
        this.arr.forEach((v,i)=>{
            _this.n = v.num;               // 这里指向vue
            console.log(this);             // 这里指向window
        })
    }
}

自家的作业场景是尚未此外点击,一进来就加载数据,作者该怎么做?

正文主要介绍了关于vue使用axios时this的针对性难点,上面话相当少说了,来一块探访详细的介绍吧。

3. 题外话

选用"=>"函数,就足以送别在此之前的三种写法了:

  1. bind(this)来改变无名函数的this指向
  2. hack写法 var _this= this;

        loginAction(formName) {
            var _this= this;
            this.$axios.post("...")
              .then(function(response){
                   console.log(_this); //这里 _this 指向vue
              })
            });
          }
    

图片 1

一.消除办法

图片 2

本文由韦德国际1946发布于韦德国际1946国际网址,转载请注明出处:vue中this的针对难题,vue使用axios贰次相应的难题

关键词: 日记本 vue Axios vue相关