Vue: Vue 2 directive deprecated acceptStatement

[94cstyles]

How do I deal with inline statements !

<div id="app">
    {{show}}
    <button v-tap="show = true">show</button>
    {{show}}
    <button v-tap="hide()">hide</button>
    {{show}}
</div>

Vue.directive('tap', {
    bind: function (el, binding) {
    }
});
var vm = new Vue({
    el: '#app',
    data: {
        show: false
    },
    methods: {
        hide: function () {
            this.$data.show = false;
        }
    }
});

output html

false
<button>show</button>
true
<button>hide</button>
false

why should we abolish it? that is now how to achieve it?

[LinusBorg]

Hi @TOP-Caho

thanks for filing this issue.

Unfortunately, I don't really understand what the core of the problem is. What is the expected behaviour?

Can you build a jsfiddle to demonstrate the problem, maybe with 1.0.26 and 2.0.0-beta,2 for comparison?

[yyx990803]

It's no longer recommended to create custom directives that behaves like v-on. Instead, you can dispatch native DOM events in your directive, and then use v-on to listen to them:

Vue.directive('tappable', {
    bind: function (el) {
      // when a tap happens
      var e = document.createEvent('HTMLEvents')
      e.initEvent('tap', true, true)
      el.dispatchEvent(e)
    }
});

In template:

<button v-tappable @tap="hide()">