CODEWITHSUNDEEP
javascriptvue.js
T dhanunjay
T dhanunjay

Reputation: 820

Using target.event how to close the dropdown when clicked outside in Vuejs?

const app = new Vue({
  el: "#app",
  name: 'aselect',
  data: {
    value: 'Select a Fruit',
    list: ["Orange", "Apple", "Kiwi", "Lemon", "Pineapple"],
    visible: false
  },
  methods: {
    toggle() {
      this.visible = !this.visible;
    },
    select(option) {
      this.value = option;
    }
  }
})
<div id="app">
  <h1>Custom Select Dropdown</h1>

  <div class="aselect" :data-value="value" :data-list="list">
    <div class="selector" @click="toggle()">
      <div class="label">
        <span>{{ value }}</span>
      </div>
      <div class="arrow" :class="{ expanded : visible }"></div>
      <div :class="{ hidden : !visible, visible }">
        <ul>
          <li :class="{ current : item === value }" v-for="item in list" @click="select(item)">{{ item }}</li>
        </ul>
      </div>
    </div>
  </div>
</div>

I am using the reference from https://www.npmjs.com/package/vue-click-outside

This is my codepen link https://codepen.io/santoshch/pen/gOmvvmN In the codepen link, i have a dropdown, where after toggling down the dropdown i am unable to close the dropdown list.

So i have searched for some reference i vuejs, And finally found npm package called vue-click-outside, Itried to place event but not sure how to proceed.

Upvotes: 0

Views: 928

Answers (1)

Mohammad Salim Hosen
Mohammad Salim Hosen

Reputation: 303

I found out a solution to your problem. Follow below steps At first Add box class to every element that lies inside the box that toggle the dropdown

<div id="app">  
  <h1>Custom Select Dropdown</h1>

  <div class="aselect" :data-value="value" :data-list="list">
        <div class="selector box" @click="toggle()">
            <div class="label box">
                    <span class="box">{{ value }}</span>
            </div>
            <div class="arrow box" :class="{ expanded : visible }"></div>
            <div :class="{ hidden : !visible, visible }">
                <ul>
                    <li :class="{ current : item === value }" v-for="item in list" @click="select(item)">{{ item }}</li>
                </ul>
            </div>
        </div>
    </div>
</div>

Then add click listener to window in vue.js

    const app = new Vue({
    el: "#app",
        name: 'aselect',
        data: {
            value: 'Select a Fruit',
            list: ["Orange","Apple","Kiwi", "Lemon", "Pineapple"],
            visible: false
        },
        methods: {
            toggle() {
                this.visible = !this.visible;
            },
            select(option) {
                this.value = option;
            },
            handleClick(e){
               const classname = e.target.className;
               if(this.visible && !classname.includes("box")){
                  this.visible = false;
               }
            }
        },
    created () {
      window.addEventListener('click', this.handleClick);
    },
    destroyed () {
      window.removeEventListener('click', this.handleClick);
    },
})

Check this pen: https://codepen.io/salim-hosen/pen/xxqYYMQ

Upvotes: 1

Related Questions