<template>
  <select v-on:change="change" :value="locale">
    <option value="ar">{{ $t('languages.ar') }}</option>
    <option value="de">{{ $t('languages.de') }}</option>
    <option value="en">{{ $t('languages.en') }}</option>
    <option value="es">{{ $t('languages.es') }}</option>
    <option value="fr">{{ $t('languages.fr') }}</option>
    <option value="is">{{ $t('languages.is') }}</option>
    <option value="it">{{ $t('languages.it') }}</option>
    <option value="ja">{{ $t('languages.ja') }}</option>
    <option value="ko">{{ $t('languages.ko') }}</option>
    <option value="nl-be">{{ $t('languages.nlBE') }}</option>
    <option value="pl">{{ $t('languages.pl') }}</option>
    <option value="pt-br">{{ $t('languages.ptBR') }}</option>
    <option value="pt">{{ $t('languages.pt') }}</option>
    <option value="ro">{{ $t('languages.ro') }}</option>
    <option value="ru">{{ $t('languages.ru') }}</option>
    <option value="sv-se">{{ $t('languages.svSE') }}</option>
    <option value="zh-cn">{{ $t('languages.zhCN') }}</option>
    <option value="zh-tw">{{ $t('languages.zhTW') }}</option>
  </select>
</template>

<script>
export default {
  name: 'languages',
  props: [ 'locale' ],
  methods: {
    change (event) {
      this.$emit('update:locale', event.target.value)
    }
  }
}
</script>

<template>
  <select v-on:change="change" :value="locale">
    <option v-for="(language, value) in locales" :key="value" :value="value">{{ $t('languages.' + language) }}</option>
  </select>
</template>

<script>

export default {
  name: 'languages',
  props: [ 'locale' ],
  data() {
    return {
      locales: {
        ar: 'ar',
        de: 'de',
        en: 'en',
        es: 'es',
        fr: 'fr',
        is: 'is',
        it: 'it',
        ja: 'ja',
        ko: 'ko',
        'nl-be': 'nlBE',
        pl: 'pl',
        'pt-br': 'ptBR',
        pt: 'pt',
        ro: 'ro',
        ru: 'ru',
        'sv-se': 'svSE',
        'zh-cn': 'zhCN',
        'zh-tw': 'zhTW'
      }
    };
  },
  methods: {
    change (event) {
      this.$emit('update:locale', event.target.value)
    }
  }
}
</script>

Use v-for for language option
refactor: Use v-for for language option
