时间戳

首页 > 解决方案 > 计算属性需要等待异步数据

vue.js - 计算属性需要等待异步数据

问题描述

export default {
  data() {
    return {
      projects: []
    }
  },
  mounted() {
    axios.get('...')
         .then(({ data } => this.projects = data)
  },
  computed: {
    personalProjects() {
          return this.projects.filter(...)
      },

      commercialProjects() {
          return this.projects.filter(...)
      }
  }
}

计算的属性需要等待从服务器获取项目，然后再设置数据。这样做的正确方法是什么？

我试过这个：

watch: {
      projects() {
          this.personalProjects = this.projects.filter(project => project.type === 'personal')
          this.commercialProjects = this.projects.filter(project => project.type === 'commercial')
      }
  },

但我收到一条错误消息：Computed property "personalProjects" was assigned to but it has no setter.

我应该设置personalProjects并commercialProjects改为data()吗？

标签： vue.js

解决方案

您目前正在做的是正确的方法。计算属性是反应性的、派生的属性。projects每当数据请求更新时，它们都会进行响应式更新。

本质上，您的组件的逻辑从没有项目开始，[]如果有人要求个人或商业项目，他们会得到正确的结果：两者都没有，[].

但是，无论何时安装组件，它都会开始加载实际项目的过程，并且无论何时完成，整个依赖关系图projects都会被响应更新，这意味着personalProjects将提供正确的结果。

推荐阅读