skip to Main Content

I have a card where for a demand on SEO i need to put the nuxt link on the title but the whole card must be clickable with a method :

<template>
  <div @click.prevent="clickit(item)" >
    <img class="background" :src="item.backgroundImage" />
    <nuxt-link
      :to="'/road/' + item.id"
    >{{ item.text }}</nuxt-link>
    <img class="mask" :src="item.backgroundMask" />
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    clickit(item) {
      this.$router.push({
        path: "/road/" + item.id
      });
    }
  }
};
</script>

So i did like that but the problem is when i click only in the title it fire two events. Is there a way to prevent default in a nuxt link ?

2

Answers


  1. Chosen as BEST ANSWER

    i've found the solution :

     <nuxt-link
        :to="'/road/' + item.id"
         @click.native="fuga"
         event
         class="ititle"
     >{{road.name}}</nuxt-link>
    

    and then i adde this method :

    fuga(e) {
      e.preventDefault();
    }
    

  2. Pro tip: You can also do @click.native.prevent="fuga". Then e.preventDefault(); is no longer required 😉

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search