CODEWITHSUNDEEP
vue.js
Bruno Francisco
Bruno Francisco

Reputation: 4240

What does an object descontruction means in this context

I'm trying to understand what does this piece of code means in vuesax VueJS framework (https://pixinvent.com/demo/vuesax-vuejs-admin-dashboard-template/documentation/components/table.html#default)

<vs-table stripe :data="users">
          <template slot-scope="{data}">
            <vs-tr :key="indextr" v-for="(tr, indextr) in data" >
              <vs-td :data="data[indextr].email">
                {{data[indextr].email}}
              </vs-td>

              <vs-td :data="data[indextr].username">
                {{data[indextr].name}}
              </vs-td>

              <vs-td :data="data[indextr].id">
                {{data[indextr].website}}
              </vs-td>

              <vs-td :data="data[indextr].id">
                {{data[indextr].id}}
              </vs-td>
            </vs-tr>
          </template>
        </vs-table>
...
data() {
  users:[
                    {
                        "id": 1,
                        "owner": "Bruno Francisco",
                        "token": "123XCS456ECS65ED",
                        "description": "To be used in production server",
                        "last_refreshed": "",
                        "created_at": "hildegard.org",
                    }, 
    ], ...
}

I'm more interested in the slot-scope="{data}". What does it do exactly? This to me looks like an object deconstruction but I'm not sure how to understand this. Is this referencing the :data prop in the <vs-table stripe :data="users"> line?

Upvotes: 0

Views: 56

Answers (1)

Steven B.
Steven B.

Reputation: 9372

This is a destructured scoped slot.

Explanation:

They are exposing a way for you to access the data variable that is internally used in that component (technically it's datax in the component).

The reason it is being destructured is because they could expose multiple variables or functions through that scoped slot. For instance they could do something like this:

<template slot-scope="slotProps">
  <button @click="slotProps.someFunction()">{{ slotProps.someLabel }}</button>
  <ul>
    <li v-for="d in slotProps.data"></li>
  </ul>
</template>

But in this case they're just exposing and using the data variable.

Upvotes: 1

Related Questions