Vue-multiselect: Identical template slot for option & singleLabel

Created on 8 Jan 2019 · 2Comments · Source: shentao/vue-multiselect

It seems commonplace to me, that the option & singleLabel slots will eventually be the same.
I think there are no way in vue to add the same slot content for multiple template slots (as asked here, https://github.com/vuejs/vue/issues/9289).

May you consider adding a optionAndSingleLabel slot that, if present, is used twice and take place of both option and singleLabel?

Something like this country select box:
countries

If you got a better option to resolve this scenario, I'll be happy to hear it.
Thanks a lot.

Source

yamsellem

Most helpful comment

Using v-for seems the more basic & simple option.
(from this stackoverflow answer: https://stackoverflow.com/a/54092116/535184)

<base-layout>
  <template :slot="slotName" v-for="slotName in ['option', 'singleLabel']">
    <span :class="'flag-icon-' + props.option.toLowerCase()" />{{ countriesByCode[props.option] }}
  </template>
</base-layout>

yamsellem on 8 Jan 2019

👍3

All 2 comments

Using v-for seems the more basic & simple option.
(from this stackoverflow answer: https://stackoverflow.com/a/54092116/535184)

<base-layout>
  <template :slot="slotName" v-for="slotName in ['option', 'singleLabel']">
    <span :class="'flag-icon-' + props.option.toLowerCase()" />{{ countriesByCode[props.option] }}
  </template>
</base-layout>

yamsellem on 8 Jan 2019

👍3

I am here for the second time, so I am putting complete version of code for future me 😁 including slot-scope="props" to have props available. (credit: SO comment)

<base-layout>
  <template :slot="slotName" v-for="slotName in ['option', 'singleLabel']" slot-scope="props">
    <span :class="'flag-icon-' + props.option.toLowerCase()" />{{ countriesByCode[props.option] }}
  </template>
</base-layout>