Question

在基于值匹配的按钮单击上，我使用在另一个组件中可视化的对象填充数组。我想要达到的是：根据我当前所处的路线，我希望可视化数据的相同组件能够显示不同的数据。在一系列步骤之后，将填充数据，这些步骤以以下提交突变@click的方法结束，并且为了达到所述步骤，您需要使用其他方法。到目前为止，当我从该组件中的一条以上路线填充数据时，我实现的目标是在另一个列表之上生成列表。

modifySelectedLimitCardStatus() {
  const payload = [
    this.editedLimitCard.id,
    (this.editedLimitCard.limit_card_selected_status = true)
  ];
  this.$store.commit("selectLimitCard", payload);
}

状态和突变：

 selectedLimitCard: [],

 selectLimitCard: (state, payload) => {
    state.limitCards.forEach(limitCard => {
      if (
        limitCard.id === payload[0] &&
        limitCard.limit_card_selected_status !== payload[1]
      ) {
        state.selectedLimitCard.push(limitCard);
        console.log(state.selectedLimitCard);
      }
    });
  }

吸气剂：

  getSelectedLimitCard: state => {
    return state.selectedLimitCard;
  }

最后，可视化数据的组件：

  <v-list v-for="card in getSelectedLimitCard" :key="card.id"">
        <v-list-tile>
          <v-list-tile-content>№</v-list-tile-content>
          <v-list-tile-content class="align-end">
            {{ card.limit_card_number }}
          </v-list-tile-content>
        </v-list-tile>
      </v-list>

有人可以给我一个主意并指出正确的方向吗？预先感谢！

Answer 1

根据评论部分的反馈，听起来数据存储很可能是问题所在，数组是此任务准备不充分的数据结构。我建议使用一个简单的JSON对象，每个键都是刚创建的路由：

limitCards = {
    routeone: {
        payload: ...,
        other_route_specific_data: ...
    },
    routetwo: {
        payload: ...,
        other_route_specific_data: ...
    }
}

然后可以将“ v-for”的数据绑定到以下内容的返回：

limitcards.[current route].selectedLimitCard

看来这将解决唯一性，并能够显示每个选项卡特定数据到路由。

根据路由Vue / Vuex在同一组件中显示不同的数据

1 个答案: