Support updating touch event handler on reused cached components

[gvlasov]

With current directive installation scheme, a tap listener would not update when a cached component is reused, e.g. when this documented hack is used. An example to consider:

<HeroPortrait
    v-for="hero in heroes"
    v-touch:tap="onPortraitTapHacky(hero)"
/>

export default {
  props: {
    heroes: {
      type: Array
    }
  }
  methods: {
    onPortraitTapHacky(hero) {
        return function() {
            alert(hero.name)
        };
    },
  }
}

Without the fix, when heroes prop is changed and the list of portraits is rebuilt, a cached component is used for each updated portrait, and on that cached component the event handler would not correspond to the current hero bound to that component.

I'm not very experienced with vue.js, so please suggest code improvements.

[jerrybendy]

Hi, Thanks for your contribution. But this code doesn't work for me.

In touch directive, it should use bind function to bind events on an element. And then use componentUpdated to update binding when something changes.

So, in my opinion, keep the bind function as before, and add a componentUpdated function to update binding.

componentUpdated: function($el) {
  removePreviousEventListeners($el);
  bindEventListeners($el);
},

[gvlasov]

@jerrybendy Fixed

[jerrybendy]

This is a very old PR and your code is alreay in the latest version, so I will close this PR now. Thanks for your contribution.