🚧

vue-multiselect slot="selection” Not Working

問題

The most complete selecting solution for Vue.js, without jQuery.

https://vue-multiselect.js.org/#sub-multiple-select

Vue-Multiselectドキュメントを参考にして以下のように作成しましたが、selectionが適用されません。


<template slot="selection" slot-scope="{ values, search, isOpen }">
	<span class="multiselect__single" v-if="values.length" v-show="!isOpen">
		{{ values.length }} options selected
	</span>
</template>

参考にした資料

Vue-multiselect - Vue3 - Slots not working

I'm trying to recreate the following example from Vue-multiselect document in Vue 3 but I can't seem to make it work. <multiselect v-model="value" :options="options" :

https://stackoverflow.com/questions/75350681/vue-multiselect-vue3-slots-not-working

解決方法

上記のstackoverflowを通じてslotとslot-scopeプロパティはVue2.6から使用されなくなり、Vue3から完全に削除されたことが分かり、以下のようにコードを修正して解決することができました。


<template #selection="{ values, search, isOpen }">
	<span class="multiselect__single" v-if="values.length" v-show="!isOpen">
		{{ values.length }} options selected
	</span>
</template>