Nuxt 3/Vue中v-for反转数组后日期属性关联错误

问题根源 #

你遇到的问题核心是Array.reverse()的特性导致的：这个方法是原地修改数组，会直接改变原items数组的顺序。如果父组件也在引用这个数组，会导致父组件的数据被意外篡改，进而引发Vue响应式更新的异常——看起来是publishDate没跟着反转，本质是原地修改破坏了组件更新的正常逻辑。另外你定义props时把items的类型写成了Object，实际它应该是Array，这也可能影响响应式的正常工作。

解决方案 #

不要直接在模板的v-for里调用reverse()，而是通过创建新数组的方式实现反转，避免修改原数据：

方式1：计算属性（推荐，支持响应式更新） #

用计算属性生成反转后的新数组，既保证原数据不被修改，又能在原数组变化时自动更新：

<script setup>
const props = defineProps({
    items: {
        type: Array, // 修正类型定义为数组
        required: true
    },
})

const reversedItems = computed(() => {
    // 用扩展运算符复制原数组，再反转，不修改原数据
    return [...props.items].reverse()
})
</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 reversedItems" 
            :key="item.number" 
            :name="item.name" 
            :link="item.link" 
            :number="item.number" 
            :date="item.publishDate" 
        />
    </div>
</template>

方式2：模板内直接生成新数组（简单场景可用） #

如果不需要响应式更新，也可以直接在模板里复制数组再反转：

<ListItem 
    v-for="item in [...items].reverse()" 
    :key="item.number" 
    :name="item.name" 
    :link="item.link" 
    :number="item.number" 
    :date="item.publishDate" 
/>

这样处理后，所有属性都会跟着数组正确反转，同时不会影响父组件的原数据，也能支持后续的随机排序等需求——只需要修改计算属性里的排序逻辑即可。

内容的提问来源于stack exchange，提问作者Harry