Overriding scoped slots to pass in custom props rather than the context object

[woahitsjc]

I would like a way to create a custom input that allows to override the predefined scoped slots i.e. default but rather than passing in the context object prop to use a custom prop provided in the custom input.

The specific use case is to create a custom Select component that calls the server to retrieve the data as options, which can then be displayed as option labels that can be customised. (I am thinking the best way would be through the Select's default scoped slot where this server data is passed down to.

For example:

Slot Component:

<template>
    <CustomSelect
        ...otherProps 
        v-model="context.model"
        :api-url="apiUrl"
    >
        <template slot="option" slot-scope="props">
            <slot name="default" :props="props" /> //props contains data coming from an API response in Custom Select component
        </template>
    </CustomSelect>
</template>

Formulate Input using Custom Select:

<formulate-input 
    ...otherProps
    type="customselect"
>
    <template #default="props"> // This is getting the object context, is there a way to get custom props?
        {{ props.data.optionLabel }}
    </template>
</formulate-input>

[kconde2]

Hello,

Exactly what I am trying to do here https://codesandbox.io/s/vue-formulate-custom-input-slot-forked-yb3xyk. But it doesn't seems to work.

Any update ?

Thanks in advance.

[kconde2]

Any updates ?