trame: specify item specific slots

Web Support
1

How do I add item-specific dynamic slots for VDataTable? e.g I want to model this Vuetify example in trame, how can I do it?

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    class="elevation-1"
  >
    <template v-slot:item.calories="{ item }">
      <v-chip
        :color="getColor(item.calories)"
        dark
      >
        {{ item.calories }}
      </v-chip>
    </template>
  </v-data-table>
</template>

ref: Vuetify — A Material Design Framework for Vue.js

2 
with vuetify.VDataTable(
  headers=("headers", [...]),
  items=("desserts", [...]),
  classes="elevation-1",
):
  with vuetify.Template(
    calories="{ item }",
    __properties=[
      ("calories", "v-slot:item.calories"),
    ],
  ):
    vuetify.VChip(
      "{{ item.calories }}"
      color=("item.color",), 
      dark=True,
    )
1 Like
3

That did the trick. Thanks!

1 Like
4

While we can automate most of the static properties. For that use case, we don’t know the shape of the data and therefore, we need to tell the Widget to convert a specific keyword argument into a specific JS property. That API is captured on the Abstract class which let you do custom mapping on properties and events.

1 Like