Vue3/Nuxt3中按对象slug属性数值排序失效问题求助

你当前的排序逻辑错误，直接使用(a,b) => a-b是对两个对象做减法运算，这无法正确按slug属性排序——对象间的减法会返回NaN，导致排序逻辑失效，所以才出现混乱的顺序。

正确的排序方式 #

需要在排序函数中明确访问对象的slug属性，再进行数值比较：

方案1：优化模板中的排序（不推荐，性能较差）

修改v-for中的排序逻辑，指定比较slug：

<NuxtLink 
  v-for="link in blog.children.sort((a,b) => Number(a.slug) - Number(b.slug))" 
  :key="link.slug" 
  :to="link._path"
  class="flex flex-row space-x-1 no-underline prose-sm font-normal py-1 px-4 -mx-4"
>

注：如果slug本身就是数值类型，可以去掉Number()转换；但如果是字符串格式的数字，必须转换为数值才能正确排序。

方案2：在数据获取时提前排序（推荐，性能更优）

模板中直接渲染已排序的数据，避免每次渲染都执行排序：

<template>
  <span v-for="blog in navigation" :key="blog._path">
    <h3 class="text-lg mb-1 light-text-1">Lecciones</h3>
    <NuxtLink 
      v-for="link in blog.children" 
      :key="link.slug" 
      :to="link._path"
      class="flex flex-row space-x-1 no-underline prose-sm font-normal py-1 px-4 -mx-4"
    >
      <ol class="pl-1"> 
        <li>
          <span class="light-text-1 ">
            {{ link.slug }}
          </span>
        </li> 
      </ol>
    </NuxtLink>
  </span>
</template>

<script setup>
const { data: navigation } = await useAsyncData('navigation', async () => {
  const navData = await fetchContentNavigation('cuentos-biblicos')
  // 对每个分类下的子项按slug数值排序
  navData.forEach(item => {
    item.children.sort((a, b) => Number(a.slug) - Number(b.slug))
  })
  return navData
})
</script>

为什么方案2更好？ #

模板中直接调用sort()会在组件每次重新渲染时执行一次排序操作，频繁触发会影响性能。在数据获取阶段一次性完成排序，既能保证顺序正确，也能避免不必要的性能开销。

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