Question

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()吗？

Answer 1

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

从本质上讲，组件的逻辑始于没有项目[]，并且如果有人要求进行个人或商业项目，则会得到正确的结果：[]都不存在。

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

计算属性需要等待异步数据

1 个答案: