时间戳

首页 > 解决方案 > 排序数组时如何正确使用getter

javascript - 排序数组时如何正确使用getter

问题描述

所以我在使用 vuex getter 时遇到了问题。

我的目标是使用 gettercart对作为对象数组的数据进行排序datemyCartItems

{prod_id: 2, date: Wed Nov 03 2021 10:40:20}我的问题是，在我的组件中推送第二个有效负载后Details，props['prod_id'] 正在记录prod_id: 1而不是prod_id: 2

突变

addToCart: (state, payload) => {
  state.cart.push(payload) // payload = {prod_id: 1, date: Wed Nov 03 2021 10:37:26}
}

吸气剂

 cartItems: (state) => {
   return state.cart.slice().sort(
      (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
    );
 },

html

  <div v-for="(item,index) in cartItems" :key="index">
       <Details :id="item.prod_id" />
  </div>

标签： javascriptvue.jsvuex

解决方案

使用索引key是您的问题，因为索引永远不会根据排序顺序而改变。

最佳做法是使用唯一标识符，例如prod_id

<div v-for="item in cartItems" :key="item.prod_id">
  <Details :id="item.prod_id" />
</div>

推荐阅读