Templates not working
donnyv opened this issue · comments
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>
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>
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.