What does that syntax mean?

Question

i am working with vuetify and i need to make the serverside controlled data tables run. now i saw this piece of code in the docs right here

and apart from that i am struggeling to understand how this is working i am confiused on this very piece of code.

a object with no keys gets override by this.options but this.options is empty anyway, u can see in the docs.

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

The code is object destructuring . This:

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

is the same as this:

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

If you are asking where this.options gets its values, it's from the template's .sync modifier here:

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

The v-data-table emits an event containing option data when options are set, even default options. The .sync modifier then updates the binding this.options with the emitted option data.

Here's a shorter version of the demo you linked showing this (check the console)