I created a simple component called LocaleSwitcher.vue using the Element UI library:
<template>
<el-dropdown trigger="click">
<div>
<i class="el-icon-map-location"></i>
</div>
<el-dropdown-menu>
<el-dropdown-item @click="switchLocale('ru')">
Русский
</el-dropdown-item>
<el-dropdown-item @click="switchLocale('en')">
English
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
export default {
name: "LocaleSwitcher",
methods: {
switchLocale: function(locale) {
console.log(locale);
if (this.$i18n.locale !== locale) {
this.$i18n.locale = locale;
}
}
}
};
</script>
In my view, I include it like this:
<template>
<div class="login-container">
<el-form>
<div class="title-container">
<h3 class="title">{{ $t("loginPage.formTitle") }}</h3>
<LocaleSwitcher class="set-language"></LocaleSwitcher>
</div>
</div>
</template>
<script>
import LocaleSwitcher from "@/components/LocaleSwitcher";
export default {
name: "Login",
components: {
LocaleSwitcher
}
};
</script>
The component is visible on the page with no errors, but when selecting a language, nothing happens - the selection is not even logged to the console.