VueJS - Невозможно получить доступ к назначенному this.property, объявленному в смонтированном () в смонтированном ()

Question

Я делаю проект, в котором я получаю данные api из моего backend laravel с помощью axios get и использую его свойство для объединения канала в смонтированном разделе моего компонента.

Я получаю api/user через axios get, который содержит

{
  "id": 1,
  "name": "admin",
  "email": "[e-mail]",
  "email_verified_at": null,
  "created_at": "2019-08-17 10:06:14",
  "updated_at": "2019-11-27 02:03:30",
  "phone_number": "[phone]",
  "phone_number_verified": 0,
  "company_id": 1,
  "verification_code": "",
  "signature": "",
  "signature_image": null,
}

Вот как я получаю пользовательские данные из моего бэкэнда laravel через axios:

mounted() {
  this.$http
    .get('/api/user')
    .then(response => ( this.user = response.data ))
    .catch(error => console.log(error))
},

Что затем объявляется как пустой массив в моем разделе data() как таковой:

data() {
  return {
    user: [],
  };
},

Я могу получить доступ к свойствам, например id, в моем шаблоне через {{ user.id }}, и когда я пытаюсь получить к нему доступ в разделе смонтированного (), он дает мне объект, но когда я пытаюсь выполнить console.log (this. user.id) внутри смонтированного, вместо этого он выдает undefined. Причина, по которой мне нужен доступ к this.user.id в смонтированном разделе, заключается в том, что я использую его для объединения канала, который я использую через Laravel Echo, заданного как таковой:

mounted() {
  this.$http
    .get('/api/user')
    .then(response => ( this.user = response.data ))
    .catch(error => console.log(error))

  this.$echo
    .channel(`new-notification.${this.user.id}`)
    .listen('NewNotification', (data) => {
    // eslint-disable-next-line no-alert
      this.notifications.unshift(data);
    });
},

Я новичок в Vue и не знаю, что делаю в этом не так. Было бы очень полезно, если бы кто-нибудь мог указать, что я делаю не так, или если есть лучший способ сделать это.

Answer 1

Проблема в том consoleбудет запускаться до ответа на вызов API. Вы можете позвонитьasync и попробуйте.

mounted() {
  this.fetchApi();
},
methods:{
  fetchApi: async function(){
    let response = await this.$http
     .get('/api/user');
    this.user = response.data;
    this.$echo
    .channel(`new-notification.${response.data.id}`)
    .listen('NewNotification', (data) => {
    // eslint-disable-next-line no-alert
      this.notifications.unshift(data);
    });
  }
}