Using the selection slot in v-file-input in order to show the titles of the files

[fonte85]

Hi,

I'm building my own v-file-input component similar to FileProperty.js in the mixins folder, and I want to use the selection slot feature (https://vuetifyjs.com/en/components/file-inputs/#slots) in order to show the titles of the selected files as you can see in the picture:

To achieve this, I have to create a template tag into the v-file-input as you can see in the picture:

But I don't know how to reproduce the v-slot:selection directive in order to pass the text property using the render function h().

Another approach is using the attribute slot="selection" and slot-scope="data" for the template tag but it doesn't work either.

What is the best approach?

Thanks

[albanm]

I think this code looks very much like what you are trying to accomplish.

[fonte85]

Thanks Alban

This is how I solved it and it works well.

h('v-file-input', { scopedSlots: { selection: ({ text }) => h('v-chip', { attrs: { color: 'primary' } } , text ) } } )