"fr": "Français",
};
input#modalLang.modal(type="checkbox")
- div(role="dialog")
- #language.card
+ div(
+ role="dialog"
+ data-checkbox="modalLang"
+ )
+ .card
label.modal-close(for="modalLang")
- form
- fieldset
- label(for="langSelect") {{ $tr["Language"] }}
- select#langSelect
- each language,langCode in langName
- option(value=langCode selected=(lang==langCode))
- =language
+ fieldset(@change="setLanguage($event)")
+ label(for="langSelect") {{ st.tr["Language"] }}
+ select#langSelect
+ each language,langCode in langName
+ option(value=langCode)
+ =language
</template>
<script>
+import { store } from "@/store";
export default {
- name: "Language",
- methods: {
- // Used both on index and variant page, to switch language
+ name: "my-language",
+ data: function() {
+ return {
+ st: store.state
+ };
+ },
+ mounted: function() {
+ // NOTE: better style would be in pug directly, but how?
+ document.querySelectorAll("#langSelect > option").forEach(opt => {
+ if (opt.value == this.st.lang) opt.selected = true;
+ });
+ },
+ methods: {
setLanguage: function(e) {
localStorage["lang"] = e.target.value;
- this.$lang = e.target.value;
- },
- },
+ store.setLanguage(e.target.value);
+ }
+ }
};
</script>