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;
  }

正如您在代码中看到的那样，我将状态记录在突变中并填充其中，

[{…}, __ob__: Observer]

但是，在应该可视化吸气剂的组件中

  <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()方法之前，一切工作正常。有人可以帮我指出我做错了什么吗？预先感谢！

Answer 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>

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

1 个答案: