Vue js Cara menutup menu dropdown bootstrap saat diklik di luar menu

Dec 18 2020

Saya mencoba menutup menu tarik-turun saat pengguna mengeklik di luar menu tarik-turun

header_component.vue

<div class="dropdown d-inline-block">

    <a href="#" class="logo logo-dark">
        <a href="javascript:void(0);" class="Logo-plus" @click="toggleMainMenu()">+</a>
        <span class="logo-lg">
            <img src="" alt="" height="25" id="topnav_heading_image">
        </span>
    </a>

    <div class="dropdown-menu dropdown-menu-right" style="left: 0;right: auto;" v-bind:class="show_main_menu ? 'd-block' : ''">
        ..............
     </div>
 </div

apa yang saya coba sejauh ini adalah menambahkan addeventlistener ke tubuh di klik dan removeEventListener acara di tutup. Peristiwa Tubuh tidak dipicu. Bagaimana cara menambahkan event ke body onclick?

    methods:{
        toggleMainMenu(){
            this.show_main_menu = !this.show_main_menu;
            this.show_sub_menu = false;
            this.setBodyClass();
        },
        openSubMenu(menu_key){

            let formData = new FormData();
            formData.append("access_token", window.settings.access_token);
            formData.append('menu_key',menu_key);

            this.show_main_menu = false;
            axios.post('/api/get_sub_menus', formData).then((response) => {
                
                if(response.is_sub_menu == 0){                        
                    window.location.href = response.route;
                }else{                        
                    
                    this.sub_menus = _.chunk(_.toArray(response.data.sub_menu), 3);
                    this.show_sub_menu = true;
                }

            });

        },
        setBodyClass() {
            var body = document.body;
            body.classList.toggle('open');
            if(this.show_main_menu){
                body.addEventListener('click', e => {
                this.toggleMainMenu;
              });
            } else {
                body.removeEventListener('click', e => {
                console.log('closed');
              });
            }
        }
       
    },

    directives: {
    "my-directive": {
      bind: function(el, binding) {
        alert('hello');
        this.el.addEventListener('click', e => {
            this.toggleMainMenu;
          });
      },
      unbind: function(el) {
        // Remove Event Listener
       this.el.removeEventListener('click', e => {
                console.log('closed');
        });
      }
    }

Saya mencoba dengan arahan juga tidak berhasil

<body class="container-fluid p-0" v-my-directive="1">\
<body

Jawaban

BLPraveen Dec 18 2020 at 00:08

Di bawah kode sebagai memecahkan masalah saya

    mounted(){
        document.addEventListener('click', this.close);
    },
    methods:{
        toggleMainMenu(){
            this.show_main_menu = !this.show_main_menu;
            this.show_sub_menu = false;
        },
        openSubMenu(menu_key){

            let formData = new FormData();
            formData.append("access_token", window.settings.access_token);
            formData.append('menu_key',menu_key);

            this.show_main_menu = false;
            axios.post('/api/get_sub_menus', formData).then((response) => {
                
                if(response.is_sub_menu == 0){                        
                    window.location.href = response.route;
                }else{                        
                    
                    this.sub_menus = _.chunk(_.toArray(response.data.sub_menu), 3);
                    this.show_sub_menu = true;
                }

            });

        },
        close (e) {
          if (!this.$el.contains(e.target)) {
            this.show_main_menu = false;
          }
        }            
       
    },
    beforeDestroy () {
        document.removeEventListener('click',this.close);
    },