2 方式数据绑定 V Data Table Vue + JSX

Question

我在 vue + jsx 中有一个 VDataTable，我需要使用道具 sortBy 和 sortDesc.

进行简单的双向数据绑定

所以基本上我需要相当于

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

对我来说，将这些属性设置为 data 是有意义的（table 的项目是计算的属性）：

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

数据 table 本身如下所示：

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

安装后，数据 table 会使用给定的 sortBy 和 sortDesc 值正确呈现，但单击 table 的 header 时数据不会更改。我也曾尝试在更新事件中手动更改数据，但我无法理解 update:sort-by 如何转换为 jsx。

我对 jsx 很陌生，非常感谢任何帮助。

Answer 1

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

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

2way data binding VDataTable Vue + JSX