我正在尝试创建一个可重用的组件来迭代项目,过滤它们,并向插槽添加一些类(如果项目是偶数、奇数、第一个、最后一个等)
这是我的可重用组件:
<template>
<ul :class="classes">
<slot
v-for="(item, index) in filteredItems"
:item="item"
:class="{
'first': index == 0,
'odd': !(index % 2),
'even': index % 2,
'last': index == (filteredItems.length - 1)
}"
>
</slot>
</ul>
</template>
<script>
export default {
props: ['items', 'classes'],
data() {
return {
filteredItems: this.items.filter(item => item.active)
};
}
};
</script>
这是我使用它的方式:
<component-list :classes="'some-class'" :items="category.products">
<template scope="props">
<product :product="props.item"></product>
</template>
<component-list>
一切都按预期工作,但它不会向放在里面的元素添加类。
我做错什么了吗?在 Vue.js 2 中甚至在技术上可以做这样的事情吗?
感谢您的任何帮助或建议!
原文由 Matúš Čongrády 发布,翻译遵循 CC BY-SA 4.0 许可协议
使用
vuejs2
插槽样式已被删除 , 如下所述:所建议的最简单的事情是使用包装器元素,如下所示: