title: Vue JS: Open Menu Component with Button, Close with Click Outside of Menu
body: <p><em><code>Vue JS 2.6.10</code></em></p>
  
  <p>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.</p>
  
  <p>Here's my main view <strong><code>Logbook.vue</code></strong> that has the button that opens the menu:
  <a href="https://i.stack.imgur.com/45GWk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/45GWk.png" alt="enter image description here"></a></p>
  
  <pre><code>// --- Logbook.vue ---
  &lt;script&gt;
  export default {
    name: 'Logbook',
    components:{
      Years
    },
    methods:{
      clickYears: function(){
        this.$refs.Years.show = true
      }
    }
  }
  &lt;/script&gt;
  &lt;template&gt;
    &lt;div id="current-year"&gt;
      &lt;a href="#year" ref="yearButton" v-on:click.prevent="clickYears"&gt;{{ currentYear }}&lt;/a&gt;
      &lt;Years ref="Years" v-on:selectYear="yearSelected" /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Here is the menu component <strong><code>Years.vue</code></strong> that opens when you click the button:
  <a href="https://i.stack.imgur.com/IrUOs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IrUOs.png" alt="enter image description here"></a></p>
  
  <pre><code>//--- Years.vue ---
  &lt;script&gt;
  import Vue from 'vue'
  
  //Custom directive to handle clicks outside of this component
  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
      }
    }
  }
  &lt;/script&gt;
  
  &lt;template&gt;
    &lt;div id="years" v-show="show" v-click-outside="close"&gt;
    &lt;!-- Years listed here... --&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>The <code>close</code> method is firing appropriately when I click outside of the <code>Years</code> component, but the problem is that I can't ever open the <code>Years</code> menu to begin with because clicking the button <strong>also</strong> fires the <code>close</code> behavior because it's <strong>also</strong> outside of the Years component.</p>
  
  <p>Has anyone overcome this problem? Any ideas?</p>