该语法是什么意思？

【问题标题】：What does that syntax mean?该语法是什么意思？
【发布时间】：2021-03-01 09:21:40
【问题描述】：

我正在使用 vuetify，我需要让服务器端控制的数据表运行。现在我在文档中看到了这段代码here

除此之外，我正在努力理解这是如何工作的，我对这段代码感到困惑。

一个没有键的对象被this.options覆盖但是this.options 无论如何都是空的，你可以在文档中看到。

data () {
      return {
        totalDesserts: 0,
        desserts: [],
        loading: true,
        options: {}, //<--------------------- HERE
        headers: [
          {
            text: 'Dessert (100g serving)',
            align: 'start',
            sortable: false,
            value: 'name',
          },
          { text: 'Calories', value: 'calories' },
          { text: 'Fat (g)', value: 'fat' },
          { text: 'Carbs (g)', value: 'carbs' },
          { text: 'Protein (g)', value: 'protein' },
          { text: 'Iron (%)', value: 'iron' },
        ],
      }
    },

const { sortBy, sortDesc, page, itemsPerPage } = this.options

【问题讨论】：

标签： javascript vue.js vue-component vuetify.js v-data-table

【解决方案1】：

代码是object destructuring。这个：

const { sortBy, sortDesc, page, itemsPerPage } = this.options

和这个是一样的：

const sortBy = this.options.sortBy;
const sortDesc = this.options.sortDesc;
// etc.

如果您要问this.options 的值从哪里获取，它来自模板的.sync 修饰符：

<v-data-table
    ...
    :options.sync="options"
    ...
  ></v-data-table>

v-data-table 在设置选项时发出包含选项数据的事件，甚至是默认选项。然后.sync 修饰符使用发出的选项数据更新绑定this.options。

这是您链接的演示的shorter version 显示此内容（检查控制台）

【讨论】：