Question

Nuxt：@click 不适用于 Nuxt-link

2022-06-27

14261

vue.js nuxt.js

我希望在我的 Web 应用程序中添加一种效果，在部分列表中突出显示我们所在部分。我正在使用 Nuxt。

我不知道为什么以下代码不会改变布尔值 isActive 的值。

<nuxt-link
  :to="`${path}/${filterItem.filter}`"
  :style='{"text-decoration": (isActive ? "underline" : "none")}'
  @click="selectSeason(filterItem.filter) toggleUnderline()" >

methods: {
  selectSeason(filter) {
    this.$router.push(`${this.path}/${filter}`)
  },
  toggleUnderline() {
   this.isActive = !this.isActive
  }
},

Answer 1

您可能可以通过类似这样的方法实现此目的

<template>
  <nuxt-link to="/about" :custom="true">
    <a @click="test">go to about page</a>
  </nuxt-link>
</template>

<script>
export default {
  methods: {
    test() {
      console.log('called test method')
    },
  },
}
</script>

如下所示： https://github.com/vuejs/router/issues/846#issuecomment-808150258

即便如此，这可能不是最好的方法，对于简单的用例来说似乎太过黑客。
如果您想要一个动作，请使用 button 标签，否则请在您的路线上放置条件逻辑，但不要混合客户端导航和某种点击事件。

Answer 2

与 router-link 相同，你需要使用 v-on:click.native

<nuxt-link
  :to="`${path}/${filterItem.filter}`"
  :style='{"text-decoration": (isActive ? "underline" : "none")}'
  @click.native="selectSeason(filterItem.filter) toggleUnderline()" 
>
</nuxt-link>

我们如何 v-on:click nuxt-link？

Answer 3

Nuxt3：

<script lang="ts" setup>
  const anyFunction = () => {
    console.log('easy')
  }
</script>

<template>
  <NuxtLink
    :to="'/'"
    @click.prevent="anyFunction()"
  >easy</NuxtLink>
</template>