VUETIFY - How to pass slot to nested select component

Question

I'm using last version of vuetify and trying to figure out how to make slots work. Documentation about select may be find here

VSelectWithValidation

<v-select v-model="innerValue" :error-messages="errors" v-bind="$attrs" v-on="$listeners">
  <template slot="selection" slot-scope="data">
      {{ data.item.name }}
  </template>
   <template slot="item" slot-scope="data">
      {{ data.item.name }} - {{ data.item.description }}
  </template>
</v-select>

TestComponent

<VSelectWithValidation
    rules="required"
    :items="items"
    v-model="select"
    label="Select">
    // I WOULD LIKE SLOTS TO BE AT THIS LEVEL
</VSelectWithValidation>

Basically, I would like the slots to be customized so I need to move them out of the VSelectWithValidation component to be set on the TestComponent

I tried different variations with no success.

https://codesandbox.io/s/veevalidate-components-vuetify-u11fd

Answer 1

VSelectWithValidation

You need to create slot inside your template slot item and bind scope data to able to use from other component ..

<template slot="item" slot-scope="data">
   <slot name="item" v-bind="data"></slot>
</template>

TestComponent

You can access that slot by writing v-slot:YourSlotName="hereIsBindData"

<template v-slot:item="data">
    {{ data.item.name }} // you can code here whatever you like
</template>