Vue.js => Vue에서 "this"사용하기

소개

우리에 유래에 뷰 코드에서 볼 수있는 가장 일반적인 오류 중 하나는의 오용 this . 가장 일반적인 실수하여, 두 영역에서 일반적으로 하강 this 등의 방법, 계산 속성을 정의하기 위해 약속이나 비동기 콜백 함수에서 화살표 함수를 사용하여

잘못된! Vue 메서드 내에서 콜백에 "this"를 사용합니다.

new Vue({
  el:"#app",
  data:{
    foo: "bar"
  },
  methods:{
    doSomethingAsynchronous(){
      setTimeout(function(){
        // This is wrong! Inside this function,
        // "this" refers to the window object.
        this.foo = "baz";
      }, 1000);
    }
  }
})

잘못된! 약속 안에서 "이"를 사용하십시오.

new Vue({
  el:"#star-wars-people",
  data:{
    people: null
  },
  mounted: function(){
    $.getJSON("http://swapi.co/api/people/", function(data){
      // Again, this is wrong! "this", here, refers to the window.
      this.people = data.results;
    })
  }
})

권리! 클로저를 사용하여 "this"를 캡처하십시오.

클로저를 사용하여 this 올바르게 캡쳐 할 수 있습니다.

new Vue({
  el:"#star-wars-people",
  data:{
    people: null
  },
  mounted: function(){
    // Before executing the web service call, save this to a local variable
    var self = this;
    $.getJSON("http://swapi.co/api/people/", function(data){
      // Inside this call back, because of the closure, self will
      // be accessible and refers to the Vue object.
      self.people = data.results;
    })
  }
})

권리! 바인드를 사용하십시오.

콜백 함수를 바인드 할 수 있습니다.

new Vue({
  el:"#star-wars-people",
  data:{
    people: null
  },
  mounted:function(){
    $.getJSON("http://swapi.co/api/people/", function(data){
      this.people = data.results;
    }.bind(this));
  }
})

권리! 화살표 기능을 사용하십시오.

new Vue({
  el:"#star-wars-people",
  data:{
    people: null
  },
  mounted: function(){
    $.getJSON("http://swapi.co/api/people/", data => this.people = data.results);
  }
})

주의! Arrow 함수는 Ecmascript 2015에 도입 된 구문입니다. 아직 지원되지 않지만 모든 최신 브라우저 가 지원하는 브라우저를 타겟팅하는 경우에만 사용하거나 babel 과 같은 것을 사용하여 ES5 구문으로 javascript를 컴파일하는 경우에만 사용하십시오 .

잘못된! 화살표 함수를 사용하여 "this"를 참조하는 메서드를 정의합니다.

new Vue({
  el:"#app",
  data:{
    foo: "bar"
  },
  methods:{
    // This is wrong! Arrow functions capture "this" lexically
    // and "this" will refer to the window.
    doSomething: () => this.foo = "baz"
  }
})

권리! 일반적인 함수 구문을 사용하여 메서드를 정의하십시오.

new Vue({
  el:"#app",
  data:{
    foo: "bar"
  },
  methods:{
    doSomething: function(){
      this.foo = "baz"
    }
  }
})

또는 자바 스크립트 컴파일러 또는 Ecmascript 2015를 지원하는 브라우저를 사용하는 경우

new Vue({
  el:"#app",
  data:{
    foo: "bar"
  },
  methods:{
    doSomething(){
      this.foo = "baz"
    }
  }
})

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

Vue.js
Vue에서 "this"사용하기

수색…

소개