Templates not working

[donnyv]

I keep going around and around with this and can't get templates working.
When I put the "label" back in it works fine with the built-in options render. But with the templates it only renders json code.

I'm using v 3.0.0-beta esm version

Html

<vuemultiselect class="form-select form-select-no-caret"
                                            v-model="SelectedLocation"
                                            track-by="Id"
                                            placeholder="Start typing to find location"
                                            open-direction="bottom"
                                            :options="LocationOptions"
                                            :options-limit="100"
                                            :limit="20"
                                            :searchable="true"
                                            :hide-selected="false"
                                            :close-on-select="true"
                                            :clear-on-select="false"
                                            :multiple="false"
                                            :loading="isSearchingLocation"
                                            :internal-search="false"
                                            :max-height="300"
                                            :show-no-results="false"
                                            :preserve-search="false"
                                            :allow-empty="true"
                                            :reset-after="false"
                                            v-on:search-change="asyncFind"
                                            v-on:select="onSelectedLocationName">
                                <template slot="singleLabel" slot-scope="props">
                                    <b>{{props.option.LocationName}}</b>
                                    <span>{{props.option.HouseNumStreet}}</span>
                                </template>
                                <template slot="option" slot-scope="props">
                                    <b>{{props.option.LocationName}}</b><br/>
                                    <span>{{props.option.HouseNumStreet}}</span>
                                </template>
                            </vuemultiselect>

Here is a simplified version. Templates still don't work.
https://jsfiddle.net/c2e968g5/

I also tried the new scope options with Vue 3 for slots. But it still doesn't work.

<div id="app" v-cloak>
    <vuemultiselect
                    v-model="value"
                    placeholder="Start typing to find address"
                    open-direction="bottom"
                    :options="options"
                    :options-limit="100"
                    :limit="20"
                    :searchable="true"
                    :hide-selected="false"
                    :close-on-select="true"
                    :clear-on-select="false"
                    :multiple="false"
                    :internal-search="true"
                    :max-height="300"
                    :show-no-results="false"
                    :preserve-search="false"
                    :allow-empty="true"
                    :reset-after="false">
        <template slot="singleLabel"  v-slot="{ name }">
            <span>{{name}}</span>
        </template>
        <template slot="option" v-slot="{ name, last }">
            <b>{{name}}</b>
            <br />
            <span>{{last}}</span>
        </template>
    </vuemultiselect>
</div>

[donnyv]

I got this working for option

<template v-slot:option="{ option }">
    <b>{{option.LocationName}}</b>
    <br />
    <span>{{option.HouseNumStreet}}</span>
</template>

But I can't get this working for singleLabel

<template v-slot:singleLabel="{ option }">
    <span>{{option.LocationName}}</span>
</template>

[donnyv]

So I got an answer with my singleLabel slot not working.
https://stackoverflow.com/questions/76130959/i-cant-get-slot-templates-to-work-with-vue-multiselect-3-0-0-beta-1/76131131#76131131

Since more people are going to start using imports and not precompiling. You might want to change all of your pascalCasing to all lowercase.

[mattelen]

Thanks for creating an issue @donnyv. We're aware of this (#1680) and a fix is ready for v4 when we get this that stage of the development path

[amchconsult]

is it a version 4 coming to fix this issue for vue 3?
thank you