如何在v-select选项变更时对Vuetify卡片组排序

你的排序不生效是多个代码错误叠加导致的，逐个修复即可：

核心错误点 #

• v-select绑定的v-model="sorting"没有在data中声明，Vue无法对这个值做响应式追踪，选择选项时无法正确传值给handleSort方法
• 两个排序方法存在致命逻辑错误：
  1. difficultySort中lessonList未初始化就调用push，且用for...in遍历数组拿到的是索引而非元素本身，lesson.level的判断逻辑完全不成立，运行会直接抛错
  2. timeSort手写的冒泡逻辑存在数组越界（循环到最后一位时访问i+1会拿到undefined），且排序状态标记逻辑错误，要么死循环要么根本不执行排序
• v-for的:key直接绑定整个lesson对象，虚拟DOM对比时无法识别列表项顺序变化，就算数据改了视图也不会重排
• 排序时直接修改接口返回的原数组，切换排序规则时没有原始数据做基准，多次排序后数据顺序会彻底混乱

完整修复代码 #

1. 修正data配置 #

补全缺失的响应式变量，新增原始数据存储字段避免污染源数据：

data () {
  return {
    sorting: "Difficulty", // 补全v-model绑定变量，设默认选中值
    orderNames: ["Difficulty", "Time"],
    lessons: [],
    originalLessons: [], // 存储接口返回的原始数据，每次排序基于该字段做拷贝
    levels: [
      "Beginner",
      "Intermediate",
      "Advanced"
    ]
  }
}

2. 修正mounted请求逻辑 #

接口返回数据时同时存原始数据，初始渲染用拷贝值：

mounted() {
  fetch("http://localhost:3000/lessons")
    .then(res => res.json())
    .then(data => {
      this.originalLessons = data
      this.lessons = [...data]
    })
    .catch(err => console.log(err.message))
}

3. 重写排序方法 #

抛弃容易出错的手写遍历逻辑，用数组原生sort方法实现，每次排序基于原始数据做浅拷贝，不修改源数据：

methods: {
  handleSort: function(selection) {
    switch(selection) {
      case "Difficulty":
        this.difficultySort();
        break;
      case "Time":
        this.timeSort();
        break;
    }
  },
  // 按预设的难度等级顺序排序
  difficultySort: function() {
    this.lessons = [...this.originalLessons].sort((a, b) => {
      return this.levels.indexOf(a.level) - this.levels.indexOf(b.level)
    })
  },
  // 按阅读时长升序排序
  timeSort: function() {
    this.lessons = [...this.originalLessons].sort((a, b) => {
      return a.time - b.time
    })
  }
}

4. 修正v-for的key绑定 #

不要绑定整个对象，用业务唯一字段作为key，保证虚拟DOM能正确追踪列表项变化：

<!-- 如果lesson有id字段优先绑id，没有就用唯一组合字段 -->
<v-flex md4 class="pa-6" v-for="lesson in lessons" :key="lesson.title + lesson.level">

可选优化 #

• 可以移除v-select上手动绑定的@change事件，直接给sorting加watcher，值变化时自动触发排序，更符合Vue响应式开发习惯
• v-select的label可以动态绑定sorting值，不用固定写死"Difficulty"
• 接口请求失败时可以加全局错误提示，不用仅在控制台打印日志

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