使用Vuetify 2.x v-data-table中的options对象

Question

我正在使用Vuetify 2.x中的Vue组件v-data-table。

<template>
<v-data-table
:hide-default-footer="hideFooter || false"
:ref="modelName + 'Table'"
:id="modelName + 'Table'"
:value="selectedList"
@input="$emit('update:selectedList', $event)"
:headers="dataTable.headers"
:items="collection"
:showSelect="showSelect || false"
item-key="id"
class="elevation-1"
:options.sync="topicsDataTable.options">
</v-data-table>
</template>
<script>
export default {
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'
}
}
}
}
}
</script>

根据文档，它指出可以将选项道具传递给组件以控制列排序等。

{
page: number
itemsPerPage: number
sortBy: string[]
sortDesc: boolean[]
groupBy: string[]
groupDesc: boolean[]
multiSort: boolean
mustSort: boolean
}

但是，当我在上面的示例中传递包含sortBy属性的options对象时，它会给我以下错误：

this.options.sortBy.findIndex不是函数

为什么没有正确传递？

Answer 1

看起来sortBy道具正在等待string[]，而不仅仅是一个string。

试试这个：

...
data() {
return {
topicsDataTable: {
headers: [
...
],
options: {
sortBy: ['interval_benchmark']
}
}
}
}
...