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