Vue-i18n 和列表

Question

I'm currently working with vue-i18n for internationalization and got a problem with lists in this topic. The language can be changed using a dropdown menue on a permanent navigation bar. There is a Component A with a child Component B. Within this child component there are two lists, filled via:

<select id="element1" class="ui dropdown" v-model="application.datatable">
    <option value="">... ... ...</option>     
    <option v-for="i in tableRows"  :value="i.id">
        <p>
            {{$t(i.element.name)}}
        </p>
    </option>
</select>

Here I'm experiencing the problem, that the {{$t(i.element.name)}} is translated correctly, but won't change after the first initialisation. So if I change the language from english to german, all other labels and strings are changed, but the lists are still in english (Wochentag: |Monday|Tuesday|…)

For this, I would need a possibility to either rerender the lists (maybe via id, but found nothing in jQuery) or a way to get the lists rerendered every time the language changes.

Anyone having an idea about this? Huge thanks! AdV

Answer 1

1. Bind your select to ( $i18n.locale ) in html

<select name="lang" v-model="$i18n.locale">
    <option v-for="lang in langs" :value="lang">
        @{{ $t('general.' + lang) }}
    </option>
</select>

Note: @ symbole before curly brackets is because this code is in my .blade.php file. If you are in the .vue file, it is note needed.