In my simple component, I have a list of articles with properties such as name, number, link, and publishedDate displayed in order:
<script setup>
const props = defineProps({
items: {
type: Object,
required: true
},
})
</script>
<template>
<div class="flex flex-col justify-center items-center w-full gap-6 p-4 lg:p-6">
<ListItem v-for="item in items" :name="item.name" :link="item.link" :number="item.number" :date="item.publishDate" />
</div>
</template>
The list is initially displayed from oldest to newest, but I wanted to change it to show from newest to oldest. I attempted to reverse the order like this:
<ListItem v-for="item in items.reverse()" :name="item.name" :link="item.link" :number="item.number" :date="item.publishDate" />
Although the list now displays correctly in reverse order, I noticed that the date property did not reverse accordingly. This confuses me because each item should render with the correct properties within the loop, so I'm puzzled as to why the date is incorrect.
Is there an issue with how I reversed the array within the component? It seems like a potential bug, but I am assuming it's my mistake until proven otherwise.
To provide sorting options such as shuffle client-side without additional API calls, I performed the reverse operation in the component. The reverse() is just a basic example to showcase the issue.