v-for syntax in a Vue.js component template

Question

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.

Answer 1

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.

• Alexey Starinsky: Is "props" used with slot-scope="props" something like a namespace? Can I give it another name like "props1"?
• akuiper: From my understanding, yes, you should be able to use whatever name you want. You can even destructure it with slot-scope="{ item }" so that you don't have to give it a name.