hidden params in router link using vuex

Question

I have two going to the same component, but I want to update an attribute of my store.js when I click on each of these .

<router-link :to="'service'" @click="origin(2)"><a class="navigation-links "><i class="fas fa-coins" />&nbsp;New service  </a></router-link>
<router-link :to="'service'" @click="origin(1)"><a class="navigation-links"><i class="fas fa-coins" />&nbsp; Update service </a></router-link>

The code of function origin is:

function origin(newValue) {
  this.$store.commit(SET_ORIGIN, newValue)
}

But it never has been called and I don't have my store updated

I don't want to have two different url, because for the users it needs to be the same action

I have tested with the event @click.native, but it doesn't work neither

Any suggestions?

Answer 1

Have you tried navigating inside the method after saving your data?

<div @click="origin(2)"></div>

function origin(newValue) {
  this.$store.commit(SET_ORIGIN, newValue);
  this.$router.replace({ name: "service" });
}