Vue JS如何在页面计数结果中不包括过期的记录

Question

我正在努力找出在我的页面计数中只显示日期在今天之后的数据的逻辑，即显示25条记录

如果选中了"显示已关闭"复选框，我需要能够显示它们。这会显示过期的记录，如果复选框为，则会将其添加到"计数"中

我刚才提取了记录并使用css隐藏它们，但"返回的X记录"与页面上的记录不一致。有人能帮忙吗？

Answer 1

我认为，这样的东西应该能解决你的问题。您可以使用计算属性只返回您想要的数据(在截止日期之前或之后(。

<template>
<div v-for="data in filteredData" :key="data.created_at">
<p>{{ data.title }} - {{ data.created_at }}</p>
</div>
<p>Total Count: {{ filteredData.length }}</p>
<button @click="showBefore8May = !showBefore8May">
{{ showBefore8May ? "hide" : "show" }} before 8 May 2021
</button>
</template>
<script>
import { computed, ref } from "vue";
export default {
setup() {
const datas = [
{
title: "hello",
created_at: "2021-05-03 14:01:47",
},
{
title: "hello 2",
created_at: "2021-05-05 14:01:47",
},
{
title: "hello 3",
created_at: "2021-05-07 14:01:47",
},
{
title: "hello 4",
created_at: "2021-05-10 14:01:47",
},
{
title: "hello 5",
created_at: "2021-05-11 14:01:47",
},
];
const showBefore8May = ref(true);
const filteredData = computed(() => {
return datas.filter((data) => {
if (!showBefore8May.value) {
return data.created_at > "2021-05-08 14:01:47";
}
return data;
});
});
return { datas, filteredData, showBefore8May };
},
};
</script>