Vuex dispatch running infinity

Question

Please, can anybody tell me why this function is running in an infinite loop?

  <a:href="authenticationChoice(currentView['name'])" > **(Here. Keeps executing)**
                <img
                  class="w-12 inline-block align-middle"
                  :src="showAuthenticationIcon(currentView['gitType'])"         
                />
  </a>

This is the direct function being call to dispatch the vuex action.

authenticationChoice(recieved) {
      this.$store.state.gitSourceAuthenticationChoice = recieved;

      this.$store.dispatch("gitSourceAuthenticationURL").then((response) => {
        this.navigationURL = response["oauth2_redirect"];
        console.log(this.navigationURL)
       
      });
      return this.navigationURL;
    },

This is the action function in the vuex file

  async gitSourceAuthenticationURL({ state }) {
      return await axios
        .get(`${Config.ApiUrl}/auth/login/${state.gitSourceAuthenticationChoice}`)
        .then(response => {
          return response.data
        }).catch((error) => {
          //console.log(error.data)
        });
    },

Answer 1

It is a property binding, so property bound to a value in VueJS is reactive, so every change detection, it ran and execute that.

That is why your method is getting called everything, when change detection is happening in VueJS.

<a:href="authenticationChoice(currentView['name'])" >

Kindly use click event or button to avoid this.

<button @click="authenticationChoice(currentView['name'])" >Text</button>

Or you can bind the click event on <a> tag, but you need to use <a> as button, that's not very recommendable.