Vue.js Vue JS使用Computed属性对组件排序日期

我尝试使用计算属性对日期进行排序，但没有效果，如果我使用at方法并删除切片，那么它将按预期进行排序。我也试过分开约会，但还是不起作用。我不确定是什么导致了这个问题

请找到我的代码如下

应用程序

成分



导出默认值{
数据（）{
返回{
成分：[
{
食物：“胡萝卜”，
过期日期：'2020-12-12'
},
{
食物：'木瓜'，
到期日：'2018-1-15'
},
{
食物:"橙",，
过期日期：'2021-10-13'
},
{
食物:"肉",，
到期日：'2019-4-23'
}]
}
},
计算：{
sortedItems（）{
返回此.components.slice（）.sort（（a，b）=>{
返回新日期（a.到期日）-新日期（b.到期日）；
});
}
}
}

组成部分

{{index}}
食物：{{foodName}
有效期：{{foodExpiry}
导出默认值{
道具：['foodName'，'foodExpiry']，
}

您似乎把

拼接

与

切片

混淆了。您需要

slice

来获取数组的副本并对该副本进行排序：

sortedItems（）{
返回此.components.slice（）.sort（（a，b）=>{
返回新日期（a.到期日）-新日期（b.到期日）；
});
}

您似乎把

拼接

与

切片

混淆了。您需要

slice

来获取数组的副本并对该副本进行排序：

sortedItems（）{
返回此.components.slice（）.sort（（a，b）=>{
返回新日期（a.到期日）-新日期（b.到期日）；
});
}

就像@Anatoly说的那样

---

如果根本不使用计算道具，则永远不会计算计算道具

要解决问题，您应该做的是：

使用

切片

方法代替

拼接

，因为它会变异原始数组：

sortedItems（）{
返回这个。配料。切片（）
.sort（（a，b）=>新日期（a.expiryDate）-新日期（b.expiryDate））；
}

循环通过computed属性而不是原始数组：

就像@Anatoly说的那样

---

如果根本不使用计算道具，则永远不会计算计算道具

要解决问题，您应该做的是：

使用

切片

方法代替

拼接

，因为它会变异原始数组：

sortedItems（）{
返回这个。配料。切片（）
.sort（（a，b）=>新日期（a.expiryDate）-新日期（b.expiryDate））；
}

循环通过computed属性而不是原始数组：

您没有使用

sortedItems

属性。您好，Abdelillah，我希望在页面更新时自动排序您的意思是每次创建和安装组件时？您没有使用

sortedItems

属性。您好，Abdelillah，我希望在页面更新时自动排序您是说每次创建和安装组件时？嗨，我尝试过slice，但仍然无法排序如果根本不使用，则永远不会计算计算的道具。嗨，我尝试过slice，但仍然无法排序如果根本不使用，则永远不会计算计算的道具。