如何解决我无法获取要显示在我的广告位中的信息
我觉得这应该超级简单,所以这会使它更加混乱。我无法将文本从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,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和feather图标。如果这有助于查看main.js并查看我如何进行所有注册,请告诉我。谢谢!
解决方法
问题来自v-html。由于此指令,您不能在div之间放置任何内容。
我不知道您要做什么,但是也许您应该将div放在div旁边?
<template>
<div>
<div class="icon-wrapper" v-html="svg">
</div>
<slot name="icon">sdfsdf</slot>
</div>
</template>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。