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.

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.

• javascript
• vue.js
• vue-multiselect

• please indicate that you are using Vuejs, as i see the question is for use it as native html – Álvaro Touzón Commented Jan 8, 2019 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 Commented Jan 8, 2019 at 14:07

3 Answers 3

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.

The previous answer is no longer valid and currently generates errors.

Here is what currently valid code would look like:

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

I faced similar issue and went for:

    <template
      v-for="slotName in rowsWithDate"
      :key="slotName"
      #[`item.${slotName}`]="{ item }"
    >
      <p>
        {{
          new Date(item[slotName]).toLocaleDateString(undefined, {
            day: "2-digit",
            month: "long",
            year: "numeric",
          })
        }}
      </p>
    </template>

Where:

import { ref } from "vue";
const rowsWithDate = ref(["birthDate", "createdAt", "updatedAt"]);