how to display differnet file icons in a treeview using the prepend scope ?

[12rambau]

I try to reproduce the following exaple from the vuetify documentation: https://v2.vuetifyjs.com/en/components/treeview/#slots.

It's a treeview where all the arrows are replaced with the appropriate icon. If I look at the Template version of the example it looks like this:

<template>
  <v-treeview
    v-model="tree"
    :open="initiallyOpen"
    :items="items"
    activatable
    item-key="name"
    open-on-click
  >
    <template v-slot:prepend="{ item, open }">
      <v-icon v-if="!item.file">
        {{ open ? 'mdi-folder-open' : 'mdi-folder' }}
      </v-icon>
      <v-icon v-else>
        {{ files[item.file] }}
      </v-icon>
    </template>
  </v-treeview>
</template>

I tried to translate it into a Python object:

v_slots = [{
    "name": "prepend",
    "variable": "props",
    "children": [
        v.Icon(v_if="!props.item.file", children=["mdi-folder"]),
        v.Icon(v_else="props.item.file", children=["mdi-file"])
    ],
}]
v.Treeview(items=items, v_slots=v_slots, dense=True, xs12=True)

But I got the following display:

How should I use the v-if v-else parameter to make it display only the folder ? Also how can I use the props.item.file value to search in a dictionnary of icons ?

[mariobuikhuizen]

This is missing from the documentation, but you can't use the variable in python code. It basically only works for passing event handlers to v_on= like this example:

v.Tooltip(bottom=True, v_slots=[{
    'name': 'activator',
    'variable': 'tooltip',
    'children': v.Btn(v_on='tooltip.on', color='primary', children=[
        'button with tooltip'
    ]),
}], children=['Insert tooltip text here'])