该插件在 VueJS 中未激活

Question

我尝试使用 vue-authenticate in my app, but I've some problems using the plugins' methods. This plugin has as dependency vue-resource，所以第一步是安装这两个包。

在main.js文件中，我导入并激活这两个包，包括本地认证的具体配置：

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'
})

现在，在我的名为 Login 的登录组件中，创建一个名为 aLogin 的方法以避免名称冲突：

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

在此组件中，credenciales 是一个对象，在 data() 中定义，具有两个属性，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)

如果 this.$auth 已经在 main.js 中注册，为什么它是 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)
    })
  }
}

见

该插件在 VueJS 中未激活

The plugin doesn't activate in VueJS

vue-component

vuejs2