Nuxt : @click does not work with Nuxt-link-CodePudding

I am expecting to include on my web application an effect that underlines the section where we are in the list of sections. I am working with Nuxt.

I don't know why the following code does not change the value of the boolean 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
  }
},

CodePudding user response：

You could probably achieve this with something like this

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

As shown here: https://github.com/vuejs/router/issues/846#issuecomment-808150258

Even thought, this is probably not the best approach overall and seems quite too hacky for a simple use case.
Use a button tag if you want an action, otherwise put conditional logic on your route but don't mix a client side navigation and some kind of click events.

CodePudding user response：

In Nuxt3 <NuxtLink> will get a if it's active, so you can use those to underline active link.