1

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

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

一个没有键的对象被覆盖，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
4

1 回答 1

3

代码是对象解构。这个：

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使用发出的选项数据更新绑定。

这是您链接的演示的较短版本（检查控制台）

于 2020-11-18T06:46:21.973 回答