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(
  11     role="dialog"
  12     data-checkbox="modalLang"
  13   )
  14     .card
  15       label.modal-close(for="modalLang")
  16       form(@change="setLanguage($event)")
  17         fieldset
  18           label(for="langSelect") {{ st.tr["Language"] }}
  19           select#langSelect
  20             each language,langCode in langName
  21               option(value=langCode)
  22                 =language
  23 </template>
  24
  25 <script>
  26 import { store } from "@/store";
  27 export default {
  28   name: "my-language",
  29   data: function() {
  30     return {
  31       st: store.state
  32     };
  33   },
  34   mounted: function() {
  35     // NOTE: better style would be in pug directly, but how?
  36     document.querySelectorAll("#langSelect > option").forEach(opt => {
  37       if (opt.value == this.st.lang) opt.selected = true;
  38     });
  39   },
  40   methods: {
  41     setLanguage: function(e) {
  42       localStorage["lang"] = e.target.value;
  43       store.setLanguage(e.target.value);
  44     }
  45   }
  46 };
  47 </script>