Vuetify/Vue3 slots shadowing between templates

September 6, 2023

I am looking for the correct way to display an object from a parent template in a child template. However, in the following case the objects both have the same name and the object in the parent template is being shadowed. Is there an easy way to rename one or do I have to do something more complex to be able to show both values in the child template?

<v-data-table :items="someParentItems" ...>
 <template v-slot:expanded-row="{ columns, item }">
   PARENT {{ item }}
   <v-data-table :items="someChildItems" ...>
     <template #item.someField="{ item }">
       CHILD {{ item }} <!-- Would really like CHILD {{ parentItem }} {{ childItem }} -->
     </template>
   </v-data-table>
 </template>
</v-data-table>

>Solution :

It’s just simple object destructuring, you can set new names after a colon:

<v-data-table :items="someParentItems" ...>
 <template v-slot:expanded-row="{ columns, item: parentItem }">
   PARENT {{ parentItem }}
   <v-data-table :items="someChildItems" ...>
     <template #item.someField="{ item: childItem }">
        CHILD {{ parentItem }} {{ childItem }}
     </template>
   </v-data-table>
 </template>
</v-data-table>