该语法是什么意思？

Question

我正在使用 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

Answer 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 演示（检查控制台）

该语法是什么意思？

What does that syntax mean?

javascript

vue.js

vue-component

vuetify.js

v-data-table