Execute an expression rather than calling a method inside custom Vue directives

Question

I'm using the following Vue directive to detect clicks outside an element:

Vue.directive('click-outside', {
    bind: function (el, binding, vnode) {
      el.clickOutsideEvent = function (event) {
        // here I check that click was outside the el and his childrens
        if (!(el == event.target || el.contains(event.target))) {
          // and if it did, call method provided in attribute value
          vnode.context[binding.expression](event);
        }
      };
      document.body.addEventListener('click', el.clickOutsideEvent)
    },
    unbind: function (el) {
      document.body.removeEventListener('click', el.clickOutsideEvent)
    },
  });

Works well when I provide a method, like this:

<div id="profile-list-container" v-click-outside="closeProfiles">

but when I put a direct expression inside the attribute it doesn't do anything:

<div id="profile-list-container" v-click-outside="isProfileOpen = false">

I see that the line vnode.contextbinding.expression; is what is wrong, but I'm not sure how to change it to make it work.

Answer 1

Because binding.expression is one string, then causes vnode.context[binding.expression] is undefined, so vnode.context[binding.expression](value) will fail.

Then check Vue Github, it describes why v-click-outside="isProfileOpen = false" will not work, you can check the demo (test case 3) see what will happen.

If you can convert to v-click-outside="()=>{showDiv1 = !showDiv1}", below is one sample:

let vMyDirective = {}
vMyDirective.install = function install (_Vue) {

  _Vue.directive('click-outside', {
    bind: function (el, binding, vnode) {
      el.clickOutsideEvent = function (event) {
        // here I check that click was outside the el and his childrens
        if (!(el == event.target || el.contains(event.target))) {
          // and if it did, call method provided in attribute value
          //console.log(binding.value, binding.expression)
          if(typeof binding.value==='function') {
            binding.value.bind(vnode.context)(event)
          } else {
            let expression = ''
            let beg = ["'", '`', '"'].includes(binding.expression[0]) ? 1 : 0
            let count = ["'", '`', '"'].includes(binding.expression[binding.expression.length -1]) ? binding.expression.length -1 : binding.expression.length
            expression = binding.expression.substring(beg, count)
            new Function(expression).bind(vnode.context)(event)
          }
        }
      };
      document.body.addEventListener('click', el.clickOutsideEvent)
    },
    unbind: function (el) {
      document.body.removeEventListener('click', el.clickOutsideEvent)
    },
  })
}

Vue.use(vMyDirective)

new Vue({
  el: '#app',
  data() {
    return {
      showDiv1: true,
      showDiv2: true,
      showDiv3: true
    }
  },
  methods:{
    clickOutside: function (ev) {
      console.log('test case 1', ev.toString())
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <div>Test</div>
  <div v-click-outside="clickOutside">
    Test Case 1
  </div>
  <div v-click-outside="()=>{showDiv1 = !showDiv1}">
    Test Case 2: 
    <span v-show="showDiv1" style="background-color:red">Test Case 2: You clicked outside!!!</span>
  </div>
  <div v-click-outside="showDiv2 = false">
    Test Case 3: 
    <span v-show="showDiv2" style="background-color:red">Test Case 3: You will see showDiv2 is false...!!!</span>
  </div>
  <div v-click-outside="`this.showDiv3 = !this.showDiv3`">
    Test Case 4: 
    <span v-show="showDiv3" style="background-color:red">Test Case 4: You clicked outside!!!</span>
  </div>
</div>