Vue <a @click="manageCookies()"> performs a redirect

Question

I used to have the following code that worked smoothly:

<b-button @click="manageCookies()" variant="link">{{$t('app.cookies')}}</b-button>

A freelancer modified this code when redesigning the site this way:

<a @click="manageCookies()">{{$t('app.cookies')}}</a>

The problem is that I do not see the cookie dialog but the page is reloaded instead. This is the only difference. I suppose that the on click handler shall execute the javascript method, not the reload the page. The workaround is to add dummy href:

<a href="#" @click="manageCookies()">{{$t('app.cookies')}}</a>

Is this a correct way to handle the on click method?

Answer 1

use prevent click event like this:

<a href="#" @click.prevent="manageCookies()">{{$t('app.cookies')}}</a>

this will prevent reload of page