Возможность отображения результата обещания, но длина результата отображается как неопределенная

Question

Я новичок в vue / обещании, и я изо всех сил пытаюсь понять, почему, когда я пытаюсь отобразить результат обещания, я получаю ожидаемые данные, но когда я пытаюсь выяснить его длину, он говорит undefined

Когда я пытаюсь отобразить предупреждения от displayAlerts(), я вижу список предупреждений, всего 2. Однако в computed в функции title ${this.displayAlerts.length} отображается как undefined, я ожидал увидеть 2.

Это как-то связано с displayAlerts(), приводящим к обещанию? Как мне исправить код так, чтобы я получил 2 вместо undefined?

Код ниже:

<template>
 <div>
 {{displayAlerts}}
  <li v-for="alert in alerts" class="alert">
     {{alert['name']}}
  </li>
 </div>
</template>

export default {

  data () {
    return {
      alerts: null,
      alert: new Alert(), 
      updatedAlert: new Alert(),
      deletedAlert: new Alert(),
    };
  },

  computed: {
    ...mapGetters("authentication",['token']),
    ...mapGetters("user",['profile']),
    displayAlerts() {
      return getUserAlert({
        user_id: this.profile.user_id,
        token: this.token
      }).then(response => (this.alerts = response.data)).catch(
        error => console.log(error)
      )
    },
    title () {
      return `My Alerts (${this.displayAlerts.length})`
    },
    test2() {
      return [1,2,3]
    },
  }
};
</script>

Answer 1

Примерно так должно работать:

<template>
 <div v-if="alerts">
  <h4>{{ title }}</h4>
  <li v-for="alert in alerts" class="alert">
     {{ alert.name }}
  </li>
 </div>
</template>

export default {
  data () {
    return {
      alerts: null
    }
  },

  computed: {
    ...mapGetters('authentication', ['token']),
    ...mapGetters('user', ['profile']),

    title () {
      // Handle the null case
      const alerts = this.alerts || []

      return `My Alerts (${alerts.length})`
    }
  },

  methods: {
    // This needs to be in the methods, not a computed property
    displayAlerts () {
      return getUserAlert({
        user_id: this.profile.user_id,
        token: this.token
      }).then(response => (this.alerts = response.data)).catch(
        error => console.log(error)
      )
    }
  },

  // Initiate loading in a hook, not via the template
  created () {
    this.displayAlerts()
  }
}
</script>

Примечания:

1. Вычисленные свойства не должны иметь побочных эффектов. Все асинхронное попадает в эту категорию. Вместо этого я переместил displayAlerts в метод.
2. У шаблонов не должно быть побочных эффектов. Вызов для загрузки данных должен быть в ловушке, например created или mounted.
3. title должен получить доступ к this.alerts, а не пытаться манипулировать обещанием.
4. Во время загрузки данных значение alerts будет null. Вы должны справиться с этим каким-то образом. Я включил v-if в шаблон и некоторую дополнительную обработку в title. Вы можете использовать его по-разному.
5. Я добавил title в шаблон, но это только для демонстрационных целей. Конечно, вы можете делать с ней все, что захотите.
6. Я предположил, что ваша исходная функция displayAlerts работала правильно и успешно заполняет alerts. Вы можете переименовать его в нечто более подходящее, например loadAlerts.