Nuxt3项目中v-for循环列表排序实现方法咨询

基础实现：按字符串（user_signature）排序 #

核心是用Vue的computed计算属性生成排序后的数组，既保留响应式特性，又不会修改原始接口数据。

修改你的代码如下：

模板部分（template）

把v-for="nda in ndas"替换为v-for="nda in sortedNdas"，同时修复class里的语法错误（去掉无效的font-color:前缀）：

<template>
  <div class="max-w-7xl mx-auto my-10 sm:px-6 lg:px-8">
    <div v-if="pending">Loading ...</div>
    <div v-else>
      <!-- 可选：添加排序方向切换按钮 -->
      <button @click="sortAscending = !sortAscending" class="mb-4 px-4 py-2 bg-gray-100 rounded">
        {{ sortAscending ? '切换为降序' : '切换为升序' }}
      </button>
      
      <ul class="list-none" style="columns: 4">
        <li
          v-for="nda in sortedNdas"
          v-bind:key="nda.id"
          class="text-slate-600 hover:text-red-600 hover:underline"
        >
          <Nuxt-link :to="'/'+ nda.id">
            {{ nda.user_signature }}
          </Nuxt-link>
        </li>
      </ul>
    </div>
  </div>
</template>

脚本部分（script setup）

添加计算属性和可选的排序方向控制变量：

<script setup>
const { pending, data: ndas } = useLazyFetch(
  "https://***/nda-data.json"
);
// 可选：控制排序方向（默认升序）
const sortAscending = ref(true)

// 生成排序后的数组
const sortedNdas = computed(() => {
  if (!ndas.value) return []
  // 拷贝原始数组，避免修改接口返回的原数据
  const ndaList = [...ndas.value]
  // 按user_signature字母顺序排序
  ndaList.sort((a, b) => {
    return a.user_signature.localeCompare(b.user_signature)
  })
  // 根据排序方向返回结果
  return sortAscending.value ? ndaList : ndaList.reverse()
})
</script>

其他排序场景 #

按数字（id）排序

如果需要按id的大小排序，把sort函数替换为：

ndaList.sort((a, b) => {
  // 升序用a.id - b.id，降序用b.id - a.id
  return sortAscending.value ? a.id - b.id : b.id - a.id
})

大小写不敏感排序

如果你的签名存在大小写混合的情况，可以统一转成小写后再排序：

ndaList.sort((a, b) => {
  const sigA = a.user_signature.toLowerCase()
  const sigB = b.user_signature.toLowerCase()
  return sigA.localeCompare(sigB)
})

关键说明 #

• 用[...ndas.value]拷贝数组是为了避免直接修改useLazyFetch返回的原始响应数据，防止出现意外副作用
• localeCompare方法支持多语言字符串排序，比直接用>或<更可靠

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