Vuejs Arrow 두 번째 구문을 트리거하지 않는 함수

Question

Vuejs 구성 요소의 메소드 섹션에서 람다 식을 사용하고 있습니다.

예는 입니다. 나는 alertyou()을 트리거하고 경고 메시지가 나타나면 확인을 클릭하십시오. 그런 다음 vue 개발자 도구에서 나는 this.activated이 true이됩니다.

export default { 
    name: 'HelloWorld', 
    data() { 
    return { 
     msg: 'Welcome to Your Vue.js App', 
     activated: false 
    } 
    }, 
    methods: { 
     alertme:() => { alert('Clicked'); this.activated = false; }, 
     alertyou() { 
     alert('Alert You'); 
     this.activated = true 
     } 
    } 
} 

그러나, 나는이 alertme 람다를 트리거 버튼을 클릭합니다. 경고 메시지가 나타나면 확인을 클릭하십시오. 하지만 그때이. 활성화 된 상태가 유지됩니다!

여기에 무슨 일이 벌어지고있는 것이 람다의 한계입니까? 람다 당 하나의 문장 만 트리거 할 수 있습니까? 또는 경고가 발령되면 범위를 처리해야합니까?

Answer 1

여기에 람다에 대한 제한 사항이 있습니까? 람다 당 하나의 문장 만 트리거 할 수 있습니까? 또는 경고가 발령되면 범위를 처리해야합니까?

둘 다 아닙니다.

화살표 함수는 this이 화살표 함수가 작성되었을 때의 컨텍스트에 바인드되도록합니다. 이 경우 this은 vue 인스턴스가 아닙니다. 아마도 window

function 키워드 (또는 ES6 객체 속기 스타일)를 사용하여 객체에 선언 된 함수는 함수가 선언 된 객체에 일반적으로 this이 바인딩됩니다. 당신이 alertyou에 this.activated에 액세스 할 수 있지만 alertme

당신은 alertme 방법을 선언 alertyou와 같은 구문을 사용하는 것이 좋습니다 이유

는 그입니다.

Answer 2

alertme:() => { alert('Clicked'); this.activated = false; }을 alertme() { alert('Clicked'); this.activated = false; }으로 변경하십시오. 작동 예제를 볼 수 있습니다 here