bootstrap-vue multi level drop down

Question

i'm using bootstrap-vue and i have a multi level drop down menu (for categories) . this is official site example :

https://bootstrap-vue.org/docs/components/dropdown


  First Action
  Second Action

but i don't know how to create a multi level menu (i copy drop downs inside each other but it does not work) ! it has only 1 level drop down example ! how can i create a multi level one ?

tnx

user_9095988 · Answer

So as I mentioned in my comments you can wrap b-dropdown events and do something custom like this:

window.onload = () => {
  new Vue({
    el: '#app',
    data() {
      return {
        name: 'BootstrapVue',
        isDropdown2Visible: false
      }
    },
    mounted: function () {
      this.$root.$on('bv::dropdown::show', bvEvent => {
        if(bvEvent.componentId === 'dropdown-2') {
          this.isDropdown2Visible = true;
        }
        })
      this.$root.$on('bv::dropdown::hide', bvEvent => {
        if(bvEvent.componentId === 'dropdown-2') {
          this.isDropdown2Visible = false;
        }
        if(this.isDropdown2Visible) {
          bvEvent.preventDefault()
        }
        })
    }
  })
}

body { padding: 1rem; }








  
    First Action 1
    Second Action 1
    
        First Action 2
        Second Action 2

user_6048878 · Answer

You can try something like this

This snippet contains logic for one level menu.You can edit code as per your requirement

JSBin Link

new Vue({
  el: "#app",
  data: {
    menu: [
        { title : 'one'},
      { title : 'two'},
      { title : 'three',showSubMenu : false,
        children : [
          { title : 'four'},
          { title : 'five'},
      ]},
    ]  
  },
  methods : {       
    toogleItem(index){
      if(this.menu[index].children){
          if(!this.menu[index].showSubMenu){
            this.menu[index].showSubMenu = true
          } else {
            this.menu[index].showSubMenu = false
          }
      }
      
    }
  }
})

.sub-menu{
  position: absolute;            
    min-width: 10rem;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem;
}




  
  
  JS Bin
  















  
  
    
      {{item.title}} 
        
            {{item.title}}

bootstrap-vue multi level drop down

2 Answers