vue scoped slot not being exposed

Question

I am trying to build a stepper component, where the stepper will expose to the child component the step, so it can display certain things. However, the child component is not receiving the step.

Child component:

<template>
  <v-stepper v-model="e1">
    <v-stepper-header>
      <template v-for="i in steps.length">
        <v-stepper-step
          :key="`${i}-step`"
          :complete="e1 > i"
          :step="i"
          complete-icon="$vuetify.icons.check"
        >
          {{steps[i-1].text}}
        </v-stepper-step>

        <v-divider
          v-if="i < steps.length"
          :key="i"
        ></v-divider>
      </template>
    </v-stepper-header>

    <v-stepper-items>
      <v-stepper-content
        v-for="(step, i) in steps"
        :key="`$step_content_${i}`"
        :step="i+1"
      >
        {{step}}
        <slot :step="step"></slot>
        <v-btn
          v-if="i+1 < steps.length"
          color="primary"
          @click="nextStep"
          :disabled="step.disabled"
        >
          {{$t('conditions.stepper_continue')}}
        </v-btn>
        <v-btn
          :disabled="e1 < 2"
          @click="prevStep"
          flat>
          {{$t('conditions.stepper_back')}}
        </v-btn>
      </v-stepper-content>
    </v-stepper-items>
  </v-stepper>
</template>

Parent:

<StepperComp v-if="mode !=='list'" :steps="steps">
  <template v-if="mode !== 'list'" scoped-slot="step">
    {{step}}
  </template>
</StepperComp>

I am getting the following error:

Property or method "step" is not defined on the instance but referenced during render.

Why is the parent unable to access the step from the scoped slot?

tony19 tony19 · Accepted Answer · 2019-08-17T23:08:06

It looks like you misspelled slot-scope (you incorrectly used scoped-slot). In addition, the attribute value is an object of scope data, so you would have to reference step within that object:

<template slot-scope="scopeData">
  {{ scopeData.step }}
</template>

<!-- or use object destructuring -->
<template slot-scope="{ step }">
  {{ step }}
</template>

The syntax above is actually deprecated since Vue 2.6.0, so you should migrate to the new recommended syntax:

<template v-slot="scopeData">
  {{ scopeData.step }}
</template>

<!-- or use object destructuring -->
<template v-slot="{ step }">
  {{ step }}
</template>

<!-- or v-slot shorthand: https://vuejs.org/v2/guide/components-slots.html#Named-Slots-Shorthand -->
<template #default="{ step }">
  {{ step }}
</template>

vue scoped slot not being exposed

1 Answers