CODEWITHSUNDEEP
javascriptvue.jsvuejs2
alex
alex

Reputation: 7601

Why isn't my scoped slot displaying anything?

I'm trying to use Vue's scoped slots:

App.vue:

<template>
  <div id="app">
    <b-grid>
      <slot name="col" :col="2">
        <p>Some test</p>
      </slot>
    </b-grid>
  </div>
</template>

BGrid.vue

<template>
  <div class="b-grid">
    <div class="container">
      <div class="row">
        <template slot="col" scope="props">
          <div :class="'col' + props.col">This is a column</div>
        </template>
      </div>
    </div>
  </div>
</template>

However, the slot is displayed on the page. No errors in the console:

<div id="app">
  <div class="b-grid">
    <div class="container">
      <div class="row"></div>
    </div>
  </div>
</div>

What am I doing wrong?

Note: I'm using Vue 2.3.4

Upvotes: 1

Views: 112

Answers (1)

thanksd
thanksd

Reputation: 55644

You've got the syntax flipped. You need to define a slot tag in the child component:

<div class="b-grid">
  <div class="container">
    <div class="row">
      <slot name="col" :col="2"></slot>
    </div>
  </div>
</div>

Then, in the parent component, use the template tag with the slot attribute to pass in the content to use for that slot:

<div id="app">
  <b-grid>
    <template slot="col" scope="props">
      <div :class="'col' + props.col">This is a column</div>
    </template>
  </b-grid>
</div>

Here's a fiddle.

Upvotes: 1

Related Questions