CODEWITHSUNDEEP
vue.js
Alexey Starinsky
Alexey Starinsky

Reputation: 4295

v-for syntax in a Vue.js component template

What is "props.item" in the following code in a Vue.js component template?

  <div class="expand" v-if="expand">
    <v-progress-linear :indeterminate="true"
                       height="5"
                       v-if="testTable.length === 0" />
    <v-data-table v-else-if="tableHeaders"
                  :headers="tableHeaders"
                  :items="testTable"
                  hide-actions>
      <template slot="items" slot-scope="props">
        <td v-for="(field, key) in props.item" :key="key">{{ field }}</td>
      </template>
    </v-data-table>

There is no definition of "item" above this code snippet. The props of the component are defined as follows:

props: {
  testData: {
    type: Object,
    required: true,
  },
},

so I cannot figure out where to search for 'item' and where does it come from.

Upvotes: 1

Views: 72

Answers (1)

akuiper
akuiper

Reputation: 214927

item is a piece of data that is passed to the slot items in the v-data-table component so that it will be accessible in the parent component when v-data-table component is used; i.e. in v-data-table there is a slot defined as:

<slot name="items" :item="..."></slot>
//                  ^^^^  and this is where the item comes from

You can read more about scoped slots here.

Upvotes: 2

Related Questions