Vue项目中排序后无法恢复初始相关度排序问题求助

你现在的问题出在两个核心点：

1. 数组原地排序导致原始数据丢失：Array.sort()方法会直接修改原数组，当你按字母排序后，this.results已经被替换成字母序的数组，原来的相关度排序数据已经不存在了，切回相关度选项自然没反应。
2. 错误调用this.results()：results是你的响应式数据属性，不是函数，不能加括号调用。

解决思路 #

要保留初始的相关度排序状态，必须额外存储一份原始搜索结果的副本，用来在需要恢复时重置排序；或者用计算属性处理排序逻辑，避免修改原始数据。

方案一：存储原始结果副本（适配现有代码） #

1. 初始化数据时新增原始结果存储变量：

data() {
  return {
    sortatoz: '',
    results: [], // 当前展示的结果
    originalResults: [] // 存储初始的相关度排序结果
  }
},
// 在获取搜索结果的逻辑中（比如搜索方法、mounted钩子）
async getSearchResults() {
  const res = await // 你的搜索请求逻辑
  this.results = res.data
  this.originalResults = [...res.data] // 创建副本，避免引用关联
}

2. 修改sortItems方法：

sortItems() {
  if (this.sortatoz === "alphabetically") {
    // 基于原始副本排序，不修改原始数据
    this.results = [...this.originalResults].sort((a, b) => 
      a.title.localeCompare(b.title) // 多语言友好的字符串比较
    )
  } else if (this.sortatoz === "relevance") {
    // 恢复原始的相关度排序
    this.results = [...this.originalResults]
  }
}

方案二：使用计算属性（Vue响应式最佳实践） #

这种方式无需修改原始数据，直接通过计算属性返回对应排序结果，代码更简洁：

1. 模板修改为绑定计算属性：

<select
  class="form-control col-4 col-lg-5"
  v-model="sortatoz"
  id="sortby"
  aria-label="sortby"
>
  <option disabled value="" selected>Select</option>
  <option value="alphabetically">Alphabetically</option>
  <option value="relevance">Relevance</option>
</select>

<!-- 渲染时用计算属性sortedResults -->
<div v-for="item in sortedResults" :key="item.id">{{ item.title }}</div>

2. 添加计算属性：

data() {
  return {
    sortatoz: '',
    originalResults: [] // 只存储原始的相关度排序结果
  }
},
computed: {
  sortedResults() {
    if (this.sortatoz === "alphabetically") {
      return [...this.originalResults].sort((a, b) => 
        a.title.localeCompare(b.title)
      )
    }
    // 默认返回原始相关度排序
    return this.originalResults
  }
}

补充说明 #

• 用[...array]或Array.from(array)创建数组浅副本，若结果对象是嵌套结构，需要用深拷贝（比如JSON.parse(JSON.stringify(array))）避免引用关联。
• localeCompare比直接字符串比较更适合处理特殊字符、大小写及多语言场景。

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