时间戳

首页 > 解决方案 > 能够显示承诺的结果，但结果的长度显示为未定义

vue.js - 能够显示承诺的结果，但结果的长度显示为未定义

问题描述

我是 vue/promise 的新手，我很难理解为什么当我尝试显示一个 promise 的结果时，我最终得到了预期的数据，但是当我试图找出它的长度时，它说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>

标签： vue.jspromise

解决方案

像这样的东西应该工作：

<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. 模板不应该有副作用。加载数据的调用应该在一个钩子中，例如createdor mounted。
  3. title需要访问this.alerts而不是试图操纵承诺。
  4. 在加载数据时， 的值alerts将是null。你需要以某种方式处理它。我v-if在模板中包含了 a 并在title. 您可以选择以不同的方式处理它。
  5. 我已添加title到模板中，但这仅用于演示目的。当然，你可以用它做任何你想做的事情。
  6. 我假设您的原始displayAlerts功能正常工作并成功填充alerts. 您可能希望将其重命名为更合适的名称，例如loadAlerts.

推荐阅读