플러그인이 VueJS에서 활성화되지 않았습니다

Question

vue-authenticate을 내 앱에서 사용하려고했지만 플러그인의 방법을 사용하는 데 문제가 있습니다. 이 플러그인은 종속성이 vue-resource이므로 첫 번째 단계에서는 두 패키지를 모두 설치합니다. 나는 로컬 인증에 대한 특정 구성을 포함 두 패키지를, 를 가져오고 활성화 main.js 파일에

: 방법을 만들고, Login라는 이름의 내 로그인 구성 요소에,

import Vue from 'vue' 
import VueResource from 'vue-resource' 
import VueAuthenticate from 'vue-authenticate' 
// ... 
Vue.use(VueResource) 
Vue.use(VueAuthenticate, { 
    baseUrl: 'http://sgc-server.dev', 
    tokenType: 'Token' 
}) 

지금은에 aLogin라고 이름 충돌을 피하기 :

이 구성 요소에서

// ... 
methods: { 
    aLogin: (_credenciales) => { 
    this.$auth.login(_credenciales).then((_carga) => { 
     // Ejecutamos la lógica que sigue a un login exitoso 
     console.log(_carga) 
    }) 
    } 
} 
// .. 

, credenciales는에 정의 된 객체이다은 username과 password의 두 속성이 있습니다. 메서드 aLogin은 submit 이벤트의 폼에서 호출됩니다.

<form class="form" @submit.prevent="aLogin(credenciales)"> 

하지만 아무 일도 일어나지 않으며 콘솔에 있습니다.

Login.vue?8031:64 Uncaught TypeError: Cannot read property 'login' of undefined 
    at VueComponent.aLogin (eval at <anonymous> (app.js:1987), <anonymous>:18:18) 
    at Proxy.boundFn (eval at <anonymous> (app.js:735), <anonymous>:125:14) 
    at submit (eval at <anonymous> (app.js:7875), <anonymous>:21:13) 
    at HTMLFormElement.invoker (eval at <anonymous> (app.js:735), <anonymous>:1657:18) 

이미 main.js에 등록되어있는 경우 this.$auth이 undefined 왜? 올바르게 활성화하려면 어떻게해야합니까?

미리 감사드립니다.

Answer 1

을 사용하지 않음은 굵은 화살표 기능을 사용하여 Vue에 메서드를 정의합니다. 그렇게하면 this은 Vue 인스턴스를 참조하지 않습니다.

는

methods: { 
    aLogin: function(_credenciales){ 
    this.$auth.login(_credenciales).then((_carga) => { 
     // Ejecutamos la lógica que sigue a un login exitoso 
     console.log(_carga) 
    }) 
    } 
} 

이 아니,`window` 아니다 VueJS: why is “this” undefined?