My component is called DropdownLanguage.vue
Goal: I need to show the current active language by default in the :text="selectedOptionDropdown" attribute. For example, it should display "English" which corresponds to languages.name. I'm struggling with how to handle this.
<template>
<b-dropdown id="dropdown-buttons" :text="selectedOptionDropdown" class="m-2">
<template v-for="(item, i) in languages">
<b-dropdown-item-button class="eslanguage" v-bind:data-lang="item.lang" :key="i" @click="selectedLanguage">{{ item.name }}</b-dropdown-item-button>
</template>
</b-dropdown>
</template>
<script>
import i18nService from "@/core/services/i18n.service.js";
export default {
name: "ESDropdownLanguage",
data() {
return {
languages: i18nService.languages,
selectedOptionDropdown: ''
};
},
methods: {
selectedLanguage(e) {
const el = e.target.closest("eslanguage");
const lang = el.getAttribute("data-lang");
i18nService.setActiveLanguage(lang);
},
selectedOptionDropdown() {
// Unsure what to implement here
}
},
computed: {
}
};
</script>
Another file:
const i18nService = {
defaultLanguage: "en",
languages: [
{
lang: "en",
name: "English",
flag: process.env.BASE_URL + "media/svg/flags/226-united-states.svg"
},
{
lang: "nl",
name: "Nederlands",
flag: process.env.BASE_URL + "media/svg/flags/237-netherlands.svg"
}
],
/**
* Store the active language in localStorage
* @param lang
*/
setActiveLanguage(lang) {
localStorage.setItem("language", lang);
},
/**
* Retrieve the current active language
* @returns {string | string}
*/
getActiveLanguage() {
return localStorage.getItem("language") || this.defaultLanguage;
}
};
export default i18nService;