Quasar: Touch hold directive: accept parameters

Created on 22 Apr 2017  路  5Comments  路  Source: quasarframework/quasar

It's possible that when you use the touch hold directive the handler that you use accepts parameters?

Thanxs!

Most helpful comment

Hmm, I get what you want now, but this is your responsibility entirely as it got no place in Quasar code. I'd suggest something more efficient, like writing a method which takes one parameter (the index in your v-for) which returns the handler: (simplified example).

methods: {
  handler (index) {
    return function (props) {
       ... this is the handler for v-touch-hold ...
       ... and you got a scoped "index" too ...
    }
  },
  ...
}```

```html
<div v-for="index in 10" key="index" v-touch-hold="handler(index)">...</div>

All 5 comments

TouchHold directive handler now accepts one parameter: Object with following properties

  • evt -> JS event Object
  • position -> {x, y} Object
  • duration -> time took (in milliseconds) for directive to trigger

If this is not what you had in mind, please reopen and detail your case.
Thank you!

Cool. I guess that yes, I just wanted when the directive executes a method I could pass a parameter to the method. With this I just have to create an object with the parameter?
Like:
v-touch-hold="method({evt: parameter, postion: {x,y}, duration: 800})"

Right?

Okay no, now I get it. What you are saying it's like the other touch directives (one single parameter as object with that properties as default, no chance of passing a new one from the template). I was suggesting that you could pass a parameter like a key or value from a v-for to the method that the directive executed. Just like a normal method.
I solved my need by using JavaScript dataset, and looking for closest parent to get the data attribute when the JavaScript event gets fired.

Hmm, I get what you want now, but this is your responsibility entirely as it got no place in Quasar code. I'd suggest something more efficient, like writing a method which takes one parameter (the index in your v-for) which returns the handler: (simplified example).

methods: {
  handler (index) {
    return function (props) {
       ... this is the handler for v-touch-hold ...
       ... and you got a scoped "index" too ...
    }
  },
  ...
}```

```html
<div v-for="index in 10" key="index" v-touch-hold="handler(index)">...</div>

Hmmm. I've done something similar but without the return function and the prop. And if I had for example a dialog trigger in the method it would execute automatically as many times as the directive was repeated by the v-for.
It was strange.
I will try what you suggest. If not the data approach it's working for now :D.

Thanks!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

alexeigs picture alexeigs  路  3Comments

nueko picture nueko  路  3Comments

jigarzon picture jigarzon  路  3Comments

slowaways picture slowaways  路  3Comments

xereda picture xereda  路  3Comments