vue如何给<nuxt-img>添加点击事件

Question

在我的 vue-app 中，我需要制作一个 <nuxt-img />- 可点击的，所以我尝试这样做：

<nuxt-img :src="image.src" @click="isClickable ? doSomeStuff : null" />

但出于某种我不知道的原因，这不起作用 - 点击时没有任何反应。

谁能告诉我哪里做错了？

Answer 1

尝试添加 native 修饰符：

@click.native="isClickable ? doSomeStuff : null"

Answer 2

我会在那里传递一个函数，就像评论中已经有人建议的那样：

@click="() => isClickable ? doSomeStuff : null"

但更好的方法是将逻辑包含在一个方法中并调用该方法 @click="handleClick"

...
methods: {
  handleClick(){
    if(this.isClickable){ this.doSomeStuff() }
}

Answer 3

<nuxt-img :src="image.src" @click="isClickable ? doSomeStuff : null" />

doSomeStuff 必须定义为一个函数才能被调用

否则你应该用 thunk

来调用它

例如：

<nuxt-img :src="image.src" @click="isClickable ? () => doSomeStuff : null" />

我仍然会给@onclick 事件一个未定义的值而不是一个空值

<nuxt-img :src="image.src" @click="isClickable ? () => doSomeStuff : undefined" />

Vue how to add click event to <nuxt-img>