CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
temp
temp

Reputation: 571

Slots are not showing - Vue.js

I'm learning vue right now and have problems with understanding the slots.

I got two components:

  1. BaseIcon
<template>
     ...
     <slot name="test"></slot> 
     ...
<template/>
  1. EventCard
<template>
  <router-link class="event-link" :to="{ name: 'event-show', params: {id: '1'}}">
      ..
      <BaseIcon name="users" slot="test">{{ event.attendees.length }} attending</BaseIcon>
      ..
  </router-link>
</template>

But the the "slot" ain't replaced with the content in the BaseIcon component tags in EventCard.

Upvotes: 1

Views: 6067

Answers (3)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

You could use it like v-slot because slot syntax is deprecated as mentioned here:

 <BaseIcon name="users">
   <template v-slot:test>
    {{ event.attendees.length }} attending
   </template>
</BaseIcon>

or a shorthand :

 <BaseIcon name="users" >
    <template #test>
    {{ event.attendees.length }} attending
   </template>
</BaseIcon>

Upvotes: 3

piir
piir

Reputation: 41

The named v-slot can be used only in the template. Default can be used in the component too. See the docs: https://v2.vuejs.org/v2/guide/components-slots.html#Abbreviated-Syntax-for-Lone-Default-Slots

Also:

Note that v-slot can only be added to a (with one exception), unlike the deprecated slot attribute. https://v2.vuejs.org/v2/guide/components-slots.html#Named-Slots

Upvotes: 1

Fireman Sam
Fireman Sam

Reputation: 131

I had a very similar problem recently. Turned out there was a tiny glitch in my HTML markup (I hadn't closed a bold tag). Presumably, the Vue routine that converts template HTML into Javascript script is super sensitive to this kind of glitch (unlike browsers which have been brilliant at coping with them for years) - so the template was silently failing.

I had to use a laborious "divide and conquer" process to track it down - chop everything out, then paste it back bit by bit. But there may be syntax checkers out there that would analyse your template markup thoroughly.

Worth checking.

Upvotes: 1

Related Questions