如何使 bootstrap4 折叠在 vue 中工作? [英] how to make bootstrap4 collapse work in vue?
问题描述
我使用的是 bootstrap 4.3.1 和 vue@2.6.10
我有这个菜单(正在使用折叠 - 我不想使用 JQuery):
<a class="nav-link" href="#sidebar-products" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebar-products"><i class="ni ni-single-copy-04 text-primary"></i><span class="nav-link-text">产品</span></a><div class="collapse" id="sidebar-products"><ul class="nav nav-sm flex-column"><li class="nav-item"><a href="#" class="nav-link">项目列表1</a> <li class="nav-item"><a href="#" class="nav-link">项目列表2</a>这只是一个包含 2 个子项目的块.
我使用 JQuery 看到的，当点击产品"时，#sidebar-products 接收 .show 类和 aria-expanded="true".
当有多个块时 - 单击一个块以关闭(如果有折叠)其他块.
如何让它在 vue 崩溃时工作?
更新 1
我创建了一个点击事件来完成这项工作:
<a class="nav-link" href="javascript:void(0)" @click="navItemCollapse('sidebar-products', $event)" data-toggle="collapse" 角色="按钮" aria-expanded="false" aria-controls="sidebar-products">和事件:
navItemCollapse(id, event) {让扩展 = event.target.getAttribute('aria-expanded').toLocaleLowerCase() == 'true' ?真假;让 el = document.getElementById(id);扩大 ?el.classList.remove('show') : el.classList.add('show');event.target.setAttribute('aria-expanded', !expanded);}但是如果我有更多的块怎么办?当单击打开一个块上的当前折叠以关闭其他块时???
这是没有jquery的实现
new Vue({el: '#app',数据() {返回 {菜单列表:[{name: '产品',展开:假，项目: [{name: '物品清单 1',关联: ''},{name: '物品清单 2',关联: ''}]},{name: '其他',展开:假，项目: [{name: '其他项目 1',关联: ''},{name: '其他项目 2',关联: ''}]}]}},方法: {navItemCollapse(索引){this.menuList = this.menuList.map((item, i) => {item.expand = !item.expand如果(我！==索引){item.expand = false}归还物品})}}})<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="样式表" 完整性="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="匿名"><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script><li v-for="(navItem,i) in menuList" :key="i" class="nav-item"><a class="nav-link" href="javascript:;"data-toggle="collapse" role="button" :aria-expanded="navItem.expand" aria-controls="sidebar-products" @click.prevent="navItemCollapse(i)"><i class="ni ni-single-copy-04 text-primary"></i><span class="nav-link-text">{{navItem.name}}</span></a><div v-if="navItem.items.length>0" class="collapse" :class="{show: navItem.expand}"><ul class="nav nav-sm flex-column"><li v-for="(subItem,j) in navItem.items" :key="j" class="nav-item"><a href="#" class="nav-link">{{subItem.name}}</a>
我将菜单数据整合到一个对象数组中.每个对象都有一个 expand 标志来确定它当前是否被展开.点击菜单时，切换当前菜单的展开标志.
I am using bootstrap 4.3.1 and vue@2.6.10
I have this menu (is using collapse - and I don`t want to use JQuery):
<li class="nav-item">
<a class="nav-link" href="#sidebar-products" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebar-products">
<i class="ni ni-single-copy-04 text-primary"></i>
<span class="nav-link-text">Products</span>
</a>
<div class="collapse" id="sidebar-products">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="#" class="nav-link">Item List 1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Item List 2</a>
</li>
</ul>
</div>
</li>
This is only a single block that contains 2 sub-items.
What I saw using JQuery, when click on "Products" the #sidebar-products receives the .show class and aria-expanded="true".
When having multiple blocks - when click on a block to close (if there are collapsed) the others blocks.
How can I make it work the collapse with vue?
UPDATE 1
I created a click event that do the job:
<a class="nav-link" href="javascript:void(0)" @click="navItemCollapse('sidebar-products', $event)" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebar-products">
and the event:
navItemCollapse(id, event) {
let expanded = event.target.getAttribute('aria-expanded').toLocaleLowerCase() == 'true' ? true : false;
let el = document.getElementById(id);
expanded ? el.classList.remove('show') : el.classList.add('show');
event.target.setAttribute('aria-expanded', !expanded);
}
But what if I have more blocks ? When click to open the current collapse on a block to close the others ???
This is the implementation of no jquery
new Vue({
el: '#app',
data() {
return {
menuList: [{
name: 'Products',
expand: false,
items: [{
name: 'Item List 1',
link: ''
},
{
name: 'Item List 2',
link: ''
}
]
},
{
name: 'Others',
expand: false,
items: [{
name: 'Other Item 1',
link: ''
},
{
name: 'Other Item 2',
link: ''
}
]
}
]
}
},
methods: {
navItemCollapse(index) {
this.menuList = this.menuList.map((item, i) => {
item.expand = !item.expand
if (i !== index) {
item.expand = false
}
return item
})
}
}
})
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<ul id="app">
<li v-for="(navItem,i) in menuList" :key="i" class="nav-item">
<a class="nav-link" href="javascript:;" data-toggle="collapse" role="button" :aria-expanded="navItem.expand" aria-controls="sidebar-products" @click.prevent="navItemCollapse(i)">
<i class="ni ni-single-copy-04 text-primary"></i>
<span class="nav-link-text">{{navItem.name}}</span>
</a>
<div v-if="navItem.items.length>0" class="collapse" :class="{show: navItem.expand}">
<ul class="nav nav-sm flex-column">
<li v-for="(subItem,j) in navItem.items" :key="j" class="nav-item">
<a href="#" class="nav-link">{{subItem.name}}</a>
</li>
</ul>
</div>
</li>
</ul>
I integrate the menu data into an array of objects. Each object has an expand flag to determine whether it is currently expanded. When you click on the menu, switch the expand flag of the current menu.
Note: You don't need to care about the id of the <a> tag.
这篇关于如何使 bootstrap4 折叠在 vue 中工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
