如何在 Vuex 中正确填充对象数组？答案

【问题标题】：How to correctly populate array of objects in Vuex?如何在 Vuex 中正确填充对象数组？
【发布时间】：2019-07-22 18:19:12
【问题描述】：

在基于值匹配的按钮单击上，我正在尝试使用我在其他组件中可视化的对象填充数组，我是这样做的：

这是提交突变@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);
      }
    });
  }

最后，getter：

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

正如您在代码中看到的，我将状态记录在突变中并且它已被填充，

[{…}, __ob__: Observer]

但是，在应该可视化 getter 的组件中

  <v-list :items="getSelectedLimitCard">
    <v-list-tile>
      <v-list-tile-content>№</v-list-tile-content>
      <v-list-tile-content class="align-end">
        {{ getSelectedLimitCard.limit_card_number }}
      </v-list-tile-content>
    </v-list-tile>
  </v-list>

我什么也得不到。在我介绍 .push() 填充数组的方式之前，一切正常。有人可以帮助我并指出我做错了什么吗？提前致谢！

【问题讨论】：

能否提供<v-list></v-list>组件的代码？
@EvilArthas 先生，我已经用所要求的信息编辑了帖子！
你在使用 Vuetify 吗？
是的，我正在使用 Vuetify。
{{ getSelectedLimitCard.limit_card_numbr }} getSelectedLimitCard 是Array 的类型，所以可以尝试访问第一个元素getSelectedLimitCard[0]

标签： vue.js vuex

【解决方案1】：

<v-list>
  <v-list-tile v-for="card in getSelectedLimitCard" :key="card.limit_card_number">
    <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>

【讨论】：

感谢您的帮助！