Touch directives



  • 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?


  • Admin

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



  • 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?



  • Done open issue (#205) and PR.


  • Admin

    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!



  • Maannn… thank YOU by making this awesome work!


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.