在 Vuetify 2.x v-data-table 中使用选项对象

Question

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

<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

}

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

this.options.sortBy.findIndex 不是函数

这怎么没有被正确传递？

Answer 1

看起来sortBy道具正在等待string[]，而不仅仅是一个string。尝试这个：...data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; topicsDataTable: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; headers: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; options: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sortBy: ['interval_benchmark']&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}...