如何使Bootstrap4折叠在Vue中工作?

问题描述：

我正在使用Bootstrap 4.3.1和vue@2.6.10

I am using bootstrap 4.3.1 and vue@2.6.10

我有这个菜单(正在使用折叠-而且我不想使用JQuery):

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>

这只是一个包含2个子项的块.

This is only a single block that contains 2 sub-items.

我在使用JQuery时看到的是，当单击产品"时，#sidebar-products会收到.show类和aria-expanded ="true".

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.

我该如何使用vue使其崩溃?

How can I make it work the collapse with vue?

更新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">

和事件:

 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 ???

答

这是没有jquery的实现

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>

我将菜单数据集成到一个对象数组中.每个对象都有一个 expand 标志，以确定当前是否在扩展它.当您单击菜单时，请切换当前菜单的展开标志.

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.

注意:您不需要关心< a> 标记的 id .

Note: You don't need to care about the id of the <a> tag.

如何使Bootstrap4折叠在Vue中工作?

相关推荐