如何解决使用 v-for 迭代时只创建一个 div
我有项目列表,其中一些项目需要打包在同一个 div
中,以便它们可以形成下拉部分。它看起来像这样:
<span v-for="item in items">
<div v-if="item.dropdown" class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" :href="item.href">
</div>
</div>
<span v-else>
...
</span>
</span>
基本上,我想将那些带有 dropdown
标志的项目分组到同一个 div,并使用一个按钮来显示锚标签。 v-else
部分是不应添加到下拉列表中的锚点。
甚至可以通过模板来做到这一点吗?
解决方法
vue 模板中没有类似“push”的东西。所以唯一的方法是使用两个循环。一个用于下拉项目,另一个用于其他。
<div v-for="dropdownitem in dropdownItems" :key="dropdownitem.id"> // I gess your items have an id.
...
</div>
<div v-for="item in otherItems" :key="item.id">
...
</div>
computed: {
dropdownItems(){
return this.items.filter(el => el.dropdown)
},otherItems(){
return this.items.filter(el => !el.dropdown)
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。