I cannot get information to display in my slot

Question

I feel like this should be super simple, so this is making it more confusing. I cannot get the text from EventCard into the BaseIcon slot.

My BaseIcon component looks like this...

<template>
  <div class="icon-wrapper" v-html="svg">
    <slot name="icon">sdfsdf</slot>
  </div>
</template>

<script>
import feather from 'feather-icons'
export default {
  name: 'Icon',
  props: {
    name: String,
    width: {
      type: [Number, String],
      default: 24
    },
    height: {
      type: [Number, String],
      default: 24
    }
  },
  computed: {
    svg() {
      return feather.icons[this.name].toSvg({
        class: 'icon',
        width: this.width,
        height: this.height
      })
    }
  }
}
</script>

and my EventCard component looks like this..

<template>
  <router-link
    class="event-link"
    :to="{ name: 'event-show', params: { id: '1' } }"
    >Event Show #1
    <div class="event-card -shadow">
      <span class="eyebrow">@{{ event.time }} on {{ event.date }}</span>
      <h4>{{ event.title }}</h4>
      <BaseIcon name="users">
        <template v-slot:icon>
          <h3>{{ event.attendees.length }} attending</h3>
        </template>
      </BaseIcon>
    </div>
  </router-link>
</template>

<script>
export default {
  data() {
    return {
      event: {
        id: 1,
        title: 'Park Cleanup',
        date: 'Tues Aug 19, 2018',
        time: '6:00',
        attendees: [
          { id: 'abc123', name: 'Adam Jahr' },
          { id: 'asd246', name: 'Gregg Fors' }
        ]
      }
    }
  }
}
</script>

Everything works fine without using the slots. The icon displays, but the text and the attendees.length are not displaying. Any help would be greatly appreciated!!! I also have all my components registered globally, if that helps. I have lodash and feather-icons installed as well. If it would help to see the main.js to see how I have everything registered let me know. Thank you!

Answer 1

The problem comes from the v-html. You cannot put anything between the div because of this directive.

I don't know what you're trying to do but maybe you should put the slot aside of the div ?

<template>
  <div>

    <div class="icon-wrapper" v-html="svg">
    </div>

    <slot name="icon">sdfsdf</slot>

  </div>
</template>