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

Question

Я делаю проект, в котором извлекаю данные API из моего бэкэнда laravel с помощью ax ios get и использую его свойство для объединения каналов в смонтированном разделе моего компонента.

Я извлекаю api / user через ax ios get, который содержит

{
  "id": 1,
  "name": "admin",
  "email": "admin@company.com",
  "email_verified_at": null,
  "created_at": "2019-08-17 10:06:14",
  "updated_at": "2019-11-27 02:03:30",
  "phone_number": "+12345678911",
  "phone_number_verified": 0,
  "company_id": 1,
  "verification_code": "",
  "signature": "",
  "signature_image": null,
}

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

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

Который затем объявлен как пустой массив в моем разделе data () следующим образом:

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

Я могу получить доступ к свойствам, например, id, в моем шаблоне через {{user.id }} и когда я пытаюсь получить к нему доступ в разделе mount (), он дает мне объект, но когда я пытаюсь использовать 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);
    });
},

I ' Я довольно плохо знаком с 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);
    });
  }
}