Vuetify 2.x v-data-table中options对象传参报错排查

我刚帮你排查了这个问题，核心原因很明确：你给sortBy传的是单个字符串，但Vuetify 2.x的options.sortBy要求是一个字符串数组。

看官方文档里的类型定义，sortBy是string[]类型，而你在代码里写的是：

options: { sortBy: 'interval_benchmark' }

这样sortBy是个字符串，而不是数组，当v-data-table内部调用数组专属的findIndex方法时，自然就会抛出findIndex is not a function的错误了。

解决方案 #

把sortBy的值改成数组形式就行，即使你只需要按单个字段排序，也要用数组包裹：

options: { sortBy: ['interval_benchmark'] }

如果之后需要多字段排序，只要往数组里加字段名就行，同时别忘了sortDesc也对应是数组（控制每个排序字段的升降序），比如：

options: {
  sortBy: ['interval_benchmark', 'created_at'],
  sortDesc: [true, false] // 第一个字段降序，第二个升序
}

修正后的完整代码示例 #

你的topicsDataTable部分应该改成这样：

data() {
  return {
    topicsDataTable: {
      headers: [
        { text: 'Topic', value: 'title', sortable: false },
        { text: 'Current Interval', value: 'current_revision_interval', sortable: false },
        { text: 'Interval Benchmark', value: 'interval_benchmark', sortable: true },
        { text: 'Add Date', value: 'created_at', sortable: true },
      ],
      options: {
        sortBy: ['interval_benchmark'] // 这里改成数组格式
      }
    }
  }
}

这样就能正常触发排序逻辑，不会再报错啦～

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