Same slot content for multiple template slots

Question

In vuejs, is there a way to set the same content for multiple slots without copy pasting?

So this:

<base-layout>
  <template slot="option">
    <span :class="'flag-icon-'   props.option.toLowerCase()" />{{ countriesByCode[props.option] }}
  </template>

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

Could be written that way:

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

Thanks a lot.

please indicate that you are using Vuejs, as i see the question is for use it as native html — Álvaro Touzón, Jan 08 '19 at 12:50
@ÁlvaroTouzón I've made that more clear in the question (using vue as a tag seemed ok to me). — yves amsellem, Jan 08 '19 at 14:07

score 11 · Accepted Answer · edited Jul 15 '22 at 20:25

11

You could try using v-for for that.

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

See working example.

edited Jul 15 '22 at 20:25

tony19

125,647
18
229
307

answered Jan 08 '19 at 12:46

Ana Liza Pandac

4,795
2
24
36

1

I've added `slot-scope="props"` to the `` tag (I've forget this in my question). I hadn't thought about a for loop, thanks for the tip. – yves amsellem Jan 08 '19 at 14:12

Same slot content for multiple template slots

1 Answers1

Linked