CODEWITHSUNDEEP
javascriptvue.js
Artur Müller Romanov
Artur Müller Romanov

Reputation: 5791

How to display function output in Vue.js template

I am trying to build a very simple locale changer between english and german locale. Basically what I want is a link that displays the opposite locale of what is the browser default. So if browser default is en I want it to show de and vice versa. On click it should change locale and locale displayed in the link.

Below you see an attempt which unfortunately isn't working:

<template>
    <a href="#home" @click="changeLocale">{{ notLocale }}</a>
</template>


<script>
import i18n from "../js/i18n";

export default {
  name: "navbar",
  data() {
    return {
      notLocale: ""
    }
  },
  methods: {
    changeLocale: function () {
      if (i18n.locale == "en") {
        this.notLocale = "de"
      }
    }
  }
}
</script>

What I tried to do in methods is to use vue-i18n to check for the browser locale and set notLocale accordingly.

Important note: I want the opposite of the browser locale displayed BEFORE clicking on the link and change on all consecutive clicks.

Upvotes: 0

Views: 674

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Add privent modifier to prevent the default behavior of the anchor which is the redirection to the referenced url :

@click.prevent="changeLocale"

Upvotes: 1

Related Questions