Had a not so obvious issue pop up recently in a Vue.JS app I’ve been working on for a while now. I have a table of members and if you click the member name, you get redirected to their profile page. There is a click event on the name link so it will store the profile id then use the router to push the new route. The issue is that when you click the link, you get the following error:

BUT if you click the link a second time you get redirected to the profile page as expected. This error is basically saying you can’t navigate to the same page you are on. Which is not what I was trying to do. So I was confused.

Turns out everything was working properly in my code I just didn’t account for it all. Here is my original link:

<a href="#" @click="individualStoreKeyAndRedirect(data)">{{ data.value }}</a>

The trouble is the href=”#” is firing before my @click event fires. So, Vue’s router thinks I’m trying to go to the same page. To make the behavior what I wanted, I had to prevent that from firing and just fire my @click event.

Thankfully, Vue makes it pretty easy. Just add .prevent to your @click event. My new link looks like this:

<a href="#" @click.prevent="individualStoreKeyAndRedirect(data)">{{ data.value }}</a>

And now everything works the way I wanted and no console error!