V6 Vue 3 how to use slots?

Questions
1

Hi,

I am migrating my app to the new V6 with vue 3. I have the following code:

<div v-for="shift of week" :key="shift.id">

          <f7-list style="margin:12px -8px 0 -8px">

            <f7-list-item accordion-item :accordion-item-opened="today(shift.startDate)">

              <div slot="title" :style="{color:color.schedule.shift.day}" class="day-title">{{shift.day}}</div>

              <div slot="footer" :style="{color:color.schedule.shift.datetime}">

                <span style="vertical-align:middle">{{shift.date}}</span>

                <span style="vertical-align:bottom;margin-left:1px"><f7-icon size="12px" icon="fal fa-clock"></f7-icon></span>

                <span style="vertical-align:middle; margin-left:2px">{{shift.start}} - {{shift.end}}</span>

                <span style="margin-left:3px"><f7-icon size="12px" icon="fal fa-envelope-open-dollar"></f7-icon></span>

                <span style="vertical-align:middle; margin-left:3px">{{shift.paid}}</span>

              </div>

              <f7-accordion-content>

                <f7-list no-hairline>

                  <f7-list-item v-for="(activity,index) of shift.activities" :key="index">

                    <div slot="title" :style="{color:color.schedule.shift.line}" class="line-title">{{activity.name}}</div>

                    <div slot="after" :style="{color:color.schedule.shift.times}" class="line-after">{{activity.start}} - {{activity.end}}</div>

                    <f7-icon size="8px" slot="media" f7="circle_fill" :style="{'color' : getRandomColor()}"></f7-icon>

                  </f7-list-item>

                </f7-list>

              </f7-accordion-content>

            </f7-list-item>

          </f7-list>

        </div>

      </f7-list>

    </div>

As you can see I use a lot of “slots”. This is not working… how should I get this working? The documentation just shows the old way.

Thanks!

Peter

2 
        <f7-list-item accordion-item :accordion-item-opened="today(shift.startDate)">

          <template v-slot:title>

            <div :style="{color:color.schedule.shift.day}" class="day-title">{{shift.day}}</div>

          </template>

          <template v-slot:footer>

          <div :style="{color:color.schedule.shift.datetime}">

            <span style="vertical-align:middle">{{shift.date}}</span>

            <span style="vertical-align:bottom;margin-left:1px"><f7-icon size="12px" icon="fal fa-clock"></f7-icon></span>

            <span style="vertical-align:middle; margin-left:2px">{{shift.start}} - {{shift.end}}</span>

            <span style="margin-left:3px"><f7-icon size="12px" icon="fal fa-envelope-open-dollar"></f7-icon></span>

            <span style="vertical-align:middle; margin-left:3px">{{shift.paid}}</span>

          </div>

          </template>

          <f7-accordion-content>

            <f7-list no-hairline>

              <f7-list-item v-for="(activity,index) of shift.activities" :key="index">

                <template v-slot:title>

                  <div :style="{color:color.schedule.shift.line}" class="line-title">{{activity.name}}</div>

                </template>

                <template v-slot:after>

                  <div :style="{color:color.schedule.shift.times}" class="line-after">{{activity.start}} - {{activity.end}}</div>

                </template>

                <template v-slot:media>

                  <f7-icon size="8px" f7="circle_fill" :style="{'color' : getRandomColor()}"></f7-icon>

                </template>

              </f7-list-item>

            </f7-list>
1 Like