2way 数据绑定 VDataTable Vue + JSX答案

【问题标题】：2way data binding VDataTable Vue + JSX2way 数据绑定 VDataTable Vue + JSX
【发布时间】：2021-08-27 15:25:13
【问题描述】：

我在 vue + jsx 中有一个 VDataTable，我需要一个简单的 2 路数据绑定，带有道具 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 的新手，非常感谢任何帮助。

【问题讨论】：

【解决方案1】：

尝试将 on 属性与字段 update:sort-by 一起使用：

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

【讨论】：