V-data-table template v-slot syntax

Question

Hello and thank you for reading my question.

I have an array of objects looking like this :

[{
  id=1,
  products= [a,b,c]
 },
 {
  id=2,
  products= [d,e,f]
 }]

I want to display data in a v-data-table with two columns (id and products) and products items in a nested v-data-table.

So far I found that i should use template and v-slot but I don't find the right way to do it.

<v-data-table            
        item-key="id"
        items={products}
      >
        <template v-slot="">
          <v-data-table> ... </v-data-table>
        </template>

      </v-data-table>

Instead of the nested table I get

[object Object],[object Object]

How to use template v-slot in tsx files ? And more generally, how to 'translate' vuetify js to tsx (documentation) ?

Thanks again

Answer 1

you have made a slot which is correct, but you need to tell vuetify which slot you want to access. To access the default <td> slot of all rows you can simply use v-slot:body="{ items }" and pass it the items, so you can create a view per column. (Available slots are listed here Vuetify doc, if you scroll down. Each component has them)

I have made a codepen that you can check out Codepen. As of translating it to tsx, I can't help you, since I haven't worked with it, but if you grasp the concept of how to do it on the vuetify part, you should be good!