Vue-multiselect - Vue3 - Slots not working

Question

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" 
  :multiple="true" 
  :close-on-select="false" 
  :clear-on-select="false" 
  :preserve-search="true" 
  placeholder="Pick some" 
  label="name" 
  track-by="name" 
  :preselect-first="true">
  <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>
</multiselect>`

The documentation states that "Documentation for v3.0.0 is the same as for v2.x as it is mostly backward compatible." As there's no specific examples or notes about using slots in Vue 3 I thought that if I changed the component name from 'multiselect' to 'VueMultiselect' it would work but it's not.

The select part is working just fine but when I close the dropdown the custom template doesn't show. It's just the normal tags.

Am I missing something or is the feature not fully migrated to Vue 3?

yoduh · Accepted Answer · 2023-02-05 16:54:40Z

2

VueMultiselect's documentation concerning named slots is out of date when it comes to Vue 3 syntax. slot and slot-scope attributes were deprecated in Vue 2.6 (but will continue to be supported in Vue 2.x going forward), and have been completely removed in Vue 3. Your slot in Vue 3 should be written like so:

<template v-slot:selection="{ values, search, isOpen }">

or short-hand:

<template #selection="{ values, search, isOpen }">

Documentation with more information: Named Scoped Slots in Vue 3

answered Feb 5, 2023 at 16:54

yoduh

15.5k2 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue-multiselect - Vue3 - Slots not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related