In my vue-app I need to make a <nuxt-img />-clickable, so I tried to do this:
<nuxt-img :src="image.src" @click="isClickable ? doSomeStuff : null" />
but for some reason I don't know, this is not working - nothing happens on click.
Can someone tell me what I'm doing wrong?
Try to add the native modifier :
@click.native="isClickable ? doSomeStuff : null"
I would pass a function there, like somebody already suggested in the comments:
@click="() => isClickable ? doSomeStuff : null"
but better would be to enclose the logic in a method and call the method @click="handleClick"
...
methods: {
handleClick(){
if(this.isClickable){ this.doSomeStuff() }
}
<nuxt-img :src="image.src" @click="isClickable ? doSomeStuff : null" />
doSomeStuff has to be defined as a function in order to be called like that
Otherwise you should call it with a thunk
For instance:
<nuxt-img :src="image.src" @click="isClickable ? () => doSomeStuff : null" />
Still I would give an undefined to the @onclick event instead of a null value
<nuxt-img :src="image.src" @click="isClickable ? () => doSomeStuff : undefined" />