Я не могу получить информацию для отображения в моем слоте

Question

Я чувствую, что это должно быть очень просто, так что это еще больше сбивает с толку. Не могу получить текст из EventCard в слот BaseIcon.

Мой компонент BaseIcon выглядит так...

<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>

и мой компонент EventCard выглядит так..

<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>

Все отлично работает без использования слотов. Значок отображается, но текст и длина участников не отображаются. Любая помощь будет принята с благодарностью!!! У меня также есть все мои компоненты, зарегистрированные глобально, если это поможет. У меня также установлены lodash и перья-иконки. Если это поможет увидеть main.js, чтобы увидеть, как я все зарегистрировал, дайте мне знать. Спасибо!

Answer 1

Проблема исходит из файла v-html. Вы не можете ничего помещать между div из-за этой директивы.

Я не знаю, что вы пытаетесь сделать, но, может быть, вам стоит отложить слот в сторону от div?

<template>
  <div>

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

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

  </div>
</template>