client/src/components/Language.vue

   1 <template lang="pug">
   2 div
   3   -
   4     var langName = {
   5       "en": "English",
   6       "es": "Español",
   7       "fr": "Français",
   8     };
   9   input#modalLang.modal(type="checkbox")
  10   div(role="dialog" data-checkbox="modalLang")
  11     #language.card
  12       label.modal-close(for="modalLang")
  13       form(@change="setLanguage")
  14         fieldset
  15           label(for="langSelect") {{ st.tr["Language"] }}
  16           select#langSelect
  17             each language,langCode in langName
  18               option(value=langCode)
  19                 =language
  20 </template>
  21
  22 <script>
  23 import { store } from "@/store";
  24 export default {
  25   name: "my-language",
  26   data: function() {
  27     return {
  28       st: store.state,
  29     };
  30   },
  31   mounted: function() {
  32     // NOTE: better style would be in pug directly, but how?
  33     document.querySelectorAll("#langSelect > option").forEach(opt => {
  34       if (opt.value == this.st.lang)
  35         opt.selected = true;
  36     });
  37   },
  38   methods: {
  39     setLanguage: function(e) {
  40       localStorage["lang"] = e.target.value;
  41       store.setLanguage(e.target.value);
  42     },
  43     },
  44 };
  45 </script>