Невозможно использовать это. $ Router.push ('') внутри функции docRef - PullRequest
Новая
       13

Невозможно использовать это. $ Router.push ('') внутри функции docRef

2 голосов
/ 16 июня 2019

Я пытаюсь использовать vue-router в моем проекте quasar.this.$router.push( ' ' ) работает везде на странице, за исключением этого блока docRef.

Я обнаружил, что this.$router.push все еще работает в том же компоненте.

Этот вызов маршрутизатора работает: 

const userRef = this.$db.collection('users').doc(this.$fb.auth().currentUser.uid)
console.log('your id is' + this.$fb.auth().currentUser.uid)
userRef.set({
  accountUID: this.$fb.auth().currentUser.uid,
  accountChosen: true,
  accountType: 'user'
})
this.$router.push('../user/home')

Это не работает (в том же компоненте): 

  var docRef = this.$db.collection('users').doc(uid)
  docRef.get().then(function (doc) {
    data = doc.data().accountType
    if (data === 'user') {
      console.log('account is users')
      console.log(data)
      this.$router.push('./user/home')
    } else if (data === 'truck') {
      console.log('account is a truck')
      this.$router.push('./truck/home')
    } else {
      console.log('in else statement')
    }
  }).catch(function (error) {
    console.log(error)
  })

Ошибка консоли Chrome 

TypeError: Cannot read property '$router' of undefined
        at eval (Check.vue?a4ce:44)

1 Ответ

1 голос
/ 16 июня 2019

Вместо: 

docRef.get().then(function (doc) {

Использование: 

docRef.get().then((doc) => {

Объяснение

this внутри блока тела функции стрелки относится к текущему контексту, в вашем случае к экземпляру Vue / component.

Но когда вы используете function вместо функции стрелки, блок {} создает новый контекст, изменяя семантику this, заставляя его указывать на нечто иное, чем this вне этой функции.

Другими словами, ваша проблема возникает из-за того, что каждый function () {} имеет свой собственный контекст (свой собственный this), который может быть установлен на что-то другое. Функции стрелок OTOH наследуют контекст (this) того места, где он объявлен. В этом случае, поскольку вы объявляете его внутри метода, this является экземпляром Vue. Использование функции стрелки сохраняет его. Использование function() не гарантирует этого (this может быть установлено на что-то другое, что обычно имеет место).

Для более подробной информации, я рекомендую MDN - Функции стрелок .

...