CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Martyn Ball
Martyn Ball

Reputation: 4895

Vue slot scopes within for loop

I have multiple slots within a v-for loop as shown below. Instead of binding my data for each slot, is there a way I can bind this data to all slots within the v-for loop?

<div class="vehicle-listing" v-for="(vehicle, index) in vehicles" :key="vehicle.id ? vehicle.id : 'undefined'+index">

    <div class="vehicle-listing__image">
        <slot name="listing-image" v-bind:vehicle="vehicle">
            Default content
        </slot>
    </div>

    <div class="vehicle-listing__title">
        <slot name="listing-title" v-bind:vehicle="vehicle">
            <slot name="listing-title__header" v-bind:vehicle="vehicle">
                Default content
            </slot>
            <slot name="listing-title__subtitle" v-bind:vehicle="vehicle">
                Default content
            </slot>
            <slot name="listing-title__price" v-bind:vehicle="vehicle">
                Default content
            </slot>
            <slot name="listing-title__favourites" v-bind:vehicle="vehicle">
               Default content
            </slot>
        </slot>
    </div>

    <div class="vehicle-listing__summary">
        <slot name="listing-summary" v-bind:vehicle="vehicle">
            Default content
        </slot>
    </div>

    <div class="vehicle-listing__finance">
        <slot name="listing-finance" v-bind:vehicle="vehicle">
            Default content
        </slot>
    </div>

    <div class="vehicle-listing__info">
        <slot name="listing-info" v-bind:vehicle="vehicle">
           Default content
        </slot>
    </div>

    <div class="vehicle-listing__location">
        <slot name="listing-location" v-bind:vehicle="vehicle">
           Default content
        </slot>
    </div>

    <div class="vehicle-listing__button-block">
        <slot name="listing-cta" v-bind:vehicle="vehicle">
           Default content
        </slot>
    </div>

</div>

Upvotes: 0

Views: 2903

Answers (2)

netlorecomment
netlorecomment

Reputation: 166

Its very late, but through this unwritten method you can get all slot scoped at once as dynamic:

<template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
            <slot :name="slot" v-bind="scope"/>
</template>

Edit;

for Vue 3, the below code maybe works:

<template v-for="(_, slot) of slots">
   <slot :name="slot"/>
</template>

Upvotes: 0

Steven Spungin
Steven Spungin

Reputation: 29179

No, there is no way to bind to all slots at once. You need to provide a binding for each slot individually.

https://v2.vuejs.org/v2/guide/components-slots.html#Scoped-Slots

Upvotes: 2

Related Questions