双向数据绑定VDataTable Vue + JSX

Question

我有一个VDataTable在vue + jsx，我需要一个简单的2-way数据绑定与道具sortBy和sortDesc。

所以我需要等价于

<template>
<v-data-table
:items="desserts"
:sort-desc="sortDesc"
:sort-by="sortBy"
></v-data-table>
</template>

对我来说，把这些属性设置为data是有意义的(表的项目是一个计算属性):

data() {
return {
sortDesc: false,
sortBy: "someFieldName"
};
},

数据表本身是这样的:

<VDataTable
items={this.desserts}
sortBy={this.sortBy}
sortDesc={this.sortDesc}
/>

挂载时，使用给定的sortBy和sortDesc值正确呈现数据表，但单击表头时数据不会改变。我也试图在更新事件中手动更改数据，但我无法落后于update:sort-by如何被翻译成jsx。

我对jsx很不熟悉，请帮助我，我将非常感激。

Answer 1

尝试使用onprop和字段update:sort-by:

<VDataTable
items={this.desserts}
sortBy={this.sortBy}
sortDesc={this.sortDesc}
on={{'update:sort-by':this.updateSort}}
/>