[Vuejs]-Vue.js putting the same value in two different slots

by

0👍

You can use named slots:

<template>
    <span>
        <span class="format-decimal">{{toHoursDecimal(minutes)}}<slot></slot></span>
        <span class="format-minutes">{{toHoursMinutes(minutes)}}<slot name="two"></slot></span>
    </span>
</template>

The first slot will be the default one and the second one can be used by explicitly setting the name:

<k-duration :minutes="scheduleData.totalBreaksInMinutes">This will go into the default slot<br></k-duration>
<k-duration :minutes="scheduleData.pause"><span slot="two">This will go into the second slot</span></k-duration>

As a side note, if all you’re doing is putting a line-break, you better off just using css.

Leave a comment