我無法獲取要顯示在我的插槽中的信息

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>

在不使用插槽的情況下一切正常。 圖標顯示，但文本和attendees.length 未顯示。 任何幫助將不勝感激！！！ 如果有幫助，我也已在全球注冊了所有組件。 我也安裝了 lodash 和feather-icons。 如果它有助於查看 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>