Dropdown menu language switcher i18n, vuejs

Question

I am trying to make a dropdown menu that will allow a user on my website to change the language. I'm using vuejs and i18n.

Here's the dropdown menu in App.vue:

<select v-if="languages">
  <option v-for="(lng) in Object.keys(languages)" :key="lng" @change="$i18next.changeLanguage(lng)">
    <a v-if="$i18next.resolvedLanguage !== lng">
      {{ languages[lng].nativeName }}
    </a>
    <strong v-if="$i18next.resolvedLanguage === lng">
      {{ languages[lng].nativeName }}
    </strong>
  </option>
</select>

All the languages I've added in my show up but when I select one of the languages, the text displayed does not change.

<script>
  export default {
    name: 'TranslationShowCase',
    data () {
      return {
        languages: {
          en: { nativeName: 'English' },
          fr: { nativeName: 'Français' },
          es: { nativeName: 'Espanol' }
        }
      }
    }
  }
</script>

I've looked at how to handle the event of clicking on one of the options in the dropdown menu works and moved the @ event handler to different places to see if it changed anything but it hasn't. This is probably a really easy fix, I'm a back end dev so I rarely have to deal with all the weirdness of front end and I'm currently lost.

Answer 1

What version of vue-i18n and vuejs are you using? this is important

I found vue-i18n's 8.x version sample, the @change event is not necessary, you can change directly use v-model

<select v-model="$i18n.locale">
  <option v-for="(lng, i) in Object.keys(languages)" :key="`Lang${i}`" :value="lng">
    <a v-if="$i18next.locale!== lng">
      {{ languages[lng].nativeName }}
    </a>
    ...
  </option>
</select>

<script>
export default {
  name: 'TranslationShowCase',
  data () {
    return {
      languages: {
        en: { nativeName: 'English' },
        fr: { nativeName: 'Français' },
        es: { nativeName: 'Espanol' }
      }
    }
  }
}
</script>