Touch directives

[joaopaulofilho]

I’ve made a pull request for documentation about touch directives (they are now v-touch-swipe, v-touch-pan and v-touch-hold).

So I came acrosss with an issue on v-touch-hold when this directive calls unbind:

“Uncaught (in promise) TypeError: Cannot read property ‘dataset’ of undefined(…)” quasar.common.js?e3df:900

Trace

---

• remove$1 @ quasar.common.js?e3df:900
• unbind @ quasar.common.js?e3df:1444
• callHook$1 @ vue.common.js?e881:4404
• updateDirectives @ vue.common.js?e881:4369
• unbindDirectives @ vue.common.js?e881:4306
• invokeDestroyHook @ vue.common.js?e881:3973
• invokeDestroyHook @ vue.common.js?e881:3977
• invokeDestroyHook @ vue.common.js?e881:3977
• invokeDestroyHook @ vue.common.js?e881:3977
• invokeDestroyHook @ vue.common.js?e881:3977
• invokeDestroyHook @ vue.common.js?e881:3977
• invokeDestroyHook @ vue.common.js?e881:3977
• patch @ vue.common.js?e881:4227
• Vue.$destroy @ vue.common.js?e881:1827
• destroy$1 @ vue.common.js?e881:2019
• invokeDestroyHook @ vue.common.js?e881:3972
• patch @ vue.common.js?e881:4227
• Vue.$destroy @ vue.common.js?e881:1827
• destroy$1 @ vue.common.js?e881:2019
• (anonymous function) @ vue.common.js?e881:2138
• invokeDestroyHook @ vue.common.js?e881:3972
• removeVnodes @ vue.common.js?e881:3988
• updateChildren @ vue.common.js?e881:4095
• patchVnode @ vue.common.js?e881:4129
• patch @ vue.common.js?e881:4242
• Vue._update @ vue.common.js?e881:1726
• (anonymous function) @ vue.common.js?e881:1699
• get @ vue.common.js?e881:736
• run @ vue.common.js?e881:805
• flushSchedulerQueue @ vue.common.js?e881:623
• nextTickHandler @ vue.common.js?e881:401

My code:

---

<div class="card" v-touch-hold="() => { moreOptions(schedule) }">
    {{ schedule.info }}
</div>

...

methods: {
    moreOptions: function (schedule){
        ActionSheet.create({
            title: 'More Options',
            gallery: false,
            actions: [
                {
                    label: 'Delete',
                    icon: 'delete', // specify ONLY IF using icon
                    handler: function () {
                        console.log('Deleted Article')
                    }
                }
            ],
            // optional:
            dismiss: {
                label: 'Cancel',
                icon: 'cancel',
                classes: 'text-primary',
                handler: function () {
                    console.log('Cancelled...')
                }
            }
        })
    }
}

Am I doing something wrong?

[rstoenescu]

Hmm, please open an issue to keep track of this. Will investigate it. Thanks for PR and reporting this!

[joaopaulofilho]

I couldn’t rest until find this nasty bug… And I’ve found it!

node_modules/quasar-framework/src/vue-directives/touch-hold.js:58

original

Utils.store.remove('touchhold')

fixed

Utils.store.remove('touchhold', el)

Still want me to open an issue? [edit: maybe a PR?]

Question: how can I build this fix in my node_module?

[joaopaulofilho]

Done open issue (#205) and PR.

[rstoenescu]

Thank you so much for the PR. It really helps a lot!! I’ve already got a ton of things to take care about.

Thanks, thanks, thanks!

[joaopaulofilho]

Maannn… thank YOU by making this awesome work!