Vue JS 2.6.10

I have read a variety of SO posts about how to create a custom directive so that you can detect a click outside of a popup menu so you can close it. I can't quite get it to work because I have a button that opens the menu and clicking it fires the "close" behavior.

Here's my main view Logbook.vue that has the button that opens the menu:

// --- Logbook.vue ---
<script>
export default {
  name: 'Logbook',
  ponents:{
    Years
  },
  methods:{
    clickYears: function(){
      this.$refs.Years.show = true
    }
  }
}
</script>
<template>
  <div id="current-year">
    <a href="#year" ref="yearButton" v-on:click.prevent="clickYears">{{ currentYear }}</a>
    <Years ref="Years" v-on:selectYear="yearSelected" />
  </div>
</template>

Here is the menu ponent Years.vue that opens when you click the button:

//--- Years.vue ---
<script>
import Vue from 'vue'

//Custom directive to handle clicks outside of this ponent
Vue.directive('click-outside', {
  bind: function (el, binding, vnode) {
    window.event = function (event) {
      if (!(el == event.target || el.contains(event.target))) {
        vnode.context[binding.expression](event)
      }
    };
    document.body.addEventListener('click', window.event)
  },
  unbind: function (el) {
    document.body.removeEventListener('click', window.event)
  }
})

export default{
  name: 'Years',
  data() {
    return {
      show: false
    }
  },
  methods:{
    close: function(){
      this.show = false
    }
  }
}
</script>

<template>
  <div id="years" v-show="show" v-click-outside="close">
  <!-- Years listed here... -->
  </div>
</template>

The close method is firing appropriately when I click outside of the Years ponent, but the problem is that I can't ever open the Years menu to begin with because clicking the button also fires the close behavior because it's also outside of the Years ponent.

Has anyone overe this problem? Any ideas?

Vue JS 2.6.10

I have read a variety of SO posts about how to create a custom directive so that you can detect a click outside of a popup menu so you can close it. I can't quite get it to work because I have a button that opens the menu and clicking it fires the "close" behavior.

Here's my main view Logbook.vue that has the button that opens the menu:

// --- Logbook.vue ---
<script>
export default {
  name: 'Logbook',
  ponents:{
    Years
  },
  methods:{
    clickYears: function(){
      this.$refs.Years.show = true
    }
  }
}
</script>
<template>
  <div id="current-year">
    <a href="#year" ref="yearButton" v-on:click.prevent="clickYears">{{ currentYear }}</a>
    <Years ref="Years" v-on:selectYear="yearSelected" />
  </div>
</template>

Here is the menu ponent Years.vue that opens when you click the button:

//--- Years.vue ---
<script>
import Vue from 'vue'

//Custom directive to handle clicks outside of this ponent
Vue.directive('click-outside', {
  bind: function (el, binding, vnode) {
    window.event = function (event) {
      if (!(el == event.target || el.contains(event.target))) {
        vnode.context[binding.expression](event)
      }
    };
    document.body.addEventListener('click', window.event)
  },
  unbind: function (el) {
    document.body.removeEventListener('click', window.event)
  }
})

export default{
  name: 'Years',
  data() {
    return {
      show: false
    }
  },
  methods:{
    close: function(){
      this.show = false
    }
  }
}
</script>

<template>
  <div id="years" v-show="show" v-click-outside="close">
  <!-- Years listed here... -->
  </div>
</template>

The close method is firing appropriately when I click outside of the Years ponent, but the problem is that I can't ever open the Years menu to begin with because clicking the button also fires the close behavior because it's also outside of the Years ponent.

Has anyone overe this problem? Any ideas?

• javascript
• vue.js
• vuejs2
• vue-ponent
• custom-directive

Share Improve this question Follow asked May 20, 2019 at 22:58 Clifton LabrumClifton Labrum 14.2k1313 gold badges7979 silver badges156156 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

try this

...
methods:{
  clickYears: function(event){
    this.$refs.Years.show = true
    event.stopPropagation();
  }
}
...