On my site there is a language switch, it works all by standards, in the template comes arrays of languages:
$headerBar = [
'langs' => [
[
'name' => 'Українська',
'img' => 'images/flags/ua.png',
'code' => 'ua',
'active' => true,
],
[
'name' => 'Русский',
'img' => 'images/flags/ru.png',
'code' => 'ru',
'active' => false,
],
[
'name' => 'English',
'img' => 'images/flags/uk.png',
'code' => 'uk',
'active' => false,
]
]
];
Language output template:
<template slot="language-bar">
<language-switcher v-bind:langs='{!! json_encode($langs) !!}'></language-switcher>
</template>
And the component vue.js itself:
<template>
<div class="lang-currency-switcher-wrap" :class="{ show: isVisible }">
<div class="lang-currency-switcher dropdown-toggle" @click="isVisible = true">
<span class="language">
<img :alt="activeLang.name" :src="activeLang.img"></span>
<span class="currency">{{ activeLang.code }}</span>
</div>
<div class="dropdown-menu">
<a v-for="lang in langs" v-if="!lang.active" class="dropdown-item">
<img :src="lang.img" alt="">{{ lang.name }}
</a>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['langs'],
data() {
return {
isVisible: false
};
},
computed: {
activeLang() {
let activeLang = [];
for (let lang of this.langs) {
if (lang.active) {
activeLang = lang;
}
}
return activeLang;
}
},
mounted() {
}
}
</script>
It works like this: The server renders an array of languages with clever calculations, one of which is active, it all comes to the blade template and the vue.js component is already called
The component vue.js in its turn outputs an available list of languages except active, and the active calculates and displays for the user.
When the user clicks on the language wrapper, then vue displays the entire available list.
Now the question is:
How correctly to hide all languages, in that cases, if the user clicked on any of the areas of the site, except the most wrapper languages?
Also interesting is the criticism, perhaps it could have been done differently, in a more beautiful way :)
Thank you.
