时间戳

首页 > 解决方案 > 加载组件时如何检索数据

vue.js - 加载组件时如何检索数据

问题描述

我有一个项目列表，我想在下一页的模态中显示单击项目的名称，当我单击其中一个时，它会毫无问题地加载并在我的模态中显示关联名称。

但是问题来了，当我重新加载这个项目页面时，它会抛出一个错误“无法读取未定义的属性'asso_id'”

我通过它的 id 和 getter 获取项目以检索项目对象中的 asso_id，然后使用这个 asso_id 与我的关联通过 id getter 来获取相关关联。

我认为这是因为我的组件没有尽快检索到 AssociationTitle。

这是我的代码

 computed: {
      "getProjectById",
      "getAssociationById"
    ]),
    project() {
      const projectId = this.$route.params.id;
      return this.getProjectById(projectId);
    },
    associationTitle() {
      const project = this.project;
      const association = this.getAssociationById(project.asso_id);

      return association.title;
    }
  }

 getters: {
    getProjects: state => {
      return state.projects = [...ProjectData.ProjectData];
    },
    getProjectById: state => id => {
      return state.projects.find(project => project._id === id);
    },
    getAssociations: state => {
      return state.associations = [...AssociationData.AssociationData];
    },
    getAssociationById: state => id => {
      state.associations = [...AssociationData.AssociationData];
      return state.associations.find(association => association._id === id);
    }
  }

<v-card-title class="headline grey lighten-2" primary-title> {{ associationTitle }} </v-card-title>

标签： vue.jsvuex

解决方案

我想你猜对了。你可以检查你是否有项目，例如

 associationTitle() {
      const project = this.project;
      const title = project ? this.getAssociationById(project.asso_id).title : '';
      // or typeof project !== 'undefined' or something similar
      return title;
    }

推荐阅读