'Is it possible to have a v-slot in a v-slot with sloted-scope?
I am trying to create a component that contains all my logic on the select component of vue select and I have a problem with the slot part. With vue-select, you have a slot inside the v-select to handle special data like this:
<template>
<div class="select">
<v-select :label="label" :options="options">
<!-- Slot if no results on search -->
<template slot="no-options">
<slot name="no-results">Here I can set data from the parent component</slot>
</template>
</v-select>
</div>
</template>
In this case, the data is static, so I can use a slot and add the data here, it's not a problem. But as you can see here for the second slot:
<template>
<div class="select">
<v-select :label="label" :options="options">
<!-- Slot if no results on search -->
<template slot="no-options">
<slot name="no-results">Here I can set data from the parent component</slot>
</template>
<!-- Slot of the placeholder when option is selected -->
<template slot="selected-option" slot-scope="option">
<slot name="selected-option">{{ option.label }}</slot>
</template>
</v-select>
</div>
</template>
We use slot-scope="option", and we have two levels between the parent and the child. So is it possible to have a slot-scope with two levels of hierarchy or do I need to find another way to do it?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
