0Pricing
Vue Academy · Lesson

Dynamic Slot Names

v-slot:[dynamicName], programmatic slot selection, conditional slot rendering.

Why Dynamic Slot Names

Sometimes the slot you want to fill is not known until runtime - it depends on a prop, state, or loop variable. Vue lets you compute a slot name with square-bracket syntax.

The Dynamic Argument Syntax

Wrap an expression in square brackets after v-slot:. Vue evaluates it to determine the target slot name.

<MyComponent>
  <template v-slot:[dynamicName]>
    Goes into whatever slot dynamicName equals
  </template>
</MyComponent>

All lessons in this course

  1. Named Slots and Default Slot
  2. Scoped Slots: Passing Data to Parent
  3. Dynamic Slot Names
  4. Slot Fallback Content and Checking Slots
← Back to Vue Academy