커스텀 Vue 디렉티브 내의 메서드를 호출하지 않고 식을 실행합니다.

커스텀 Vue 디렉티브 내의 메서드를 호출하지 않고 식을 실행합니다.

요소 외부의 클릭을 감지하기 위해 다음 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
          vnode.context[binding.expression](event);
        }
      };
      document.body.addEventListener('click', el.clickOutsideEvent)
    },
    unbind: function (el) {
      document.body.removeEventListener('click', el.clickOutsideEvent)
    },
  });

다음과 같은 방법을 제공하면 잘 작동합니다.

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

Atribute에 직접 표현을 넣어도 아무것도 하지 않습니다.

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

vnode.contextbinding.expression; 라는 행이 문제가 있는 것은 알 수 있습니다만, 그것을 기능시키기 위해서 변경하는 방법을 알 수 없습니다.

binding.expression은 하나의 문자열이기 때문에vnode.context[binding.expression]정의되어 있지 않기 때문에vnode.context[binding.expression](value)실패합니다.

Vue Github을 체크합니다.그 이유는 다음과 같습니다.v-click-outside="isProfileOpen = false"이 동작하지 않습니다.데모(테스트 케이스 3)를 확인해 주세요.

로 변환할 수 있는 경우v-click-outside="()=>{showDiv1 = !showDiv1}"다음은 1개의 샘플입니다.

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>

언급URL : https://stackoverflow.com/questions/51851418/execute-an-expression-rather-than-calling-a-method-inside-custom-vue-directives