使用VueJS实现对象数组中title字段按相关性/字母顺序排序

首先明确核心逻辑：Vue是数据驱动视图的框架，你不需要通过操作DOM读取文本做排序，直接修改用于渲染列表的原始数组即可，视图会自动同步更新。

修正步骤 #

1. 先在data中存储原始的相关性排序数组，用于切换回默认排序时还原：

data() {
  return {
    sortatoz: '',
    // 用于页面渲染的列表数组，每个元素包含你需要的title等字段
    itemList: [],
    // 存储初始的相关性排序原始数组
    originItemList: []
  }
},
// 如果你的列表数据是页面初始化就有的，在created钩子存原始数据
created() {
  // 若数据是接口请求返回，就在接口请求成功的回调中执行这段赋值
  this.originItemList = JSON.parse(JSON.stringify(this.itemList))
}

2. 修正sortItems排序方法，不需要操作DOM：

methods: {
  sortItems() {
    if (this.sortatoz === "alphabetically") {
      // 按title字段做字母升序，传zh-CN支持中文拼音排序
      this.itemList.sort((a, b) => a.title.localeCompare(b.title, 'zh-CN'))
    } else {
      // 还原为初始的相关性排序
      this.itemList = JSON.parse(JSON.stringify(this.originItemList))
    }
  }
}

3. 你现有下拉选择框的代码不需要修改，已经正确绑定了v-model和change事件，可直接使用。

注意事项 #

• 不要用document.querySelectorAll这类DOM操作处理排序，会脱离Vue的数据响应式机制，后续维护成本极高
• 如果需要支持大小写不敏感的排序，可以把title转成小写再比较：a.title.toLowerCase().localeCompare(b.title.toLowerCase())
• 深拷贝原始数组的时候如果你的数据里有函数、Symbol这类特殊类型，可以用你项目里的深拷贝工具方法代替JSON.parse(JSON.stringify)

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