代码之家 › 专栏 › 技术社区 › Joshua Leung

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

vue.js

0

Joshua Leung · 技术社区 · 8 年前

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() 相反

1 回复 | 直到 8 年前

1

3

zero298 8 年前

你目前所做的是正确的方法。计算属性是反应性的、派生的属性。无论何时,它们都会进行反应性更新 projects 由数据请求更新。

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

然而,无论何时安装组件,它都会开始加载实际项目的过程,并且无论何时完成,都会显示组件的整个依赖关系图 项目 将被反应性地更新含义 personalProjects 将提供正确的结果。