Vue-i18n и списки

Question

В настоящее время я работаю с vue-i18n для интернационализации и получил проблему со списками в этой теме. Язык можно изменить с помощью выпадающего меню на постоянной панели навигации. Существует Компонент A с дочерним Компонентом B. В этом дочернем компоненте есть два списка, заполненных через:

<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>

Здесь я испытываю проблему, что {{$t(i.element.name)}} переведен правильно, но не изменится после первой инициализации. Поэтому, если я изменю язык с английского на немецкий, все другие метки и строки будут изменены, но списки все еще будут на английском (Wochentag: |Monday|Tuesday|…)

Для этого мне нужна была бы возможность переопределить списки (может быть, через id, но ничего не нашел в jQuery) или способ перерисовки списков при каждом изменении языка.

У кого-нибудь есть идеи по этому поводу? Огромное спасибо! AdV

Answer 1

1. Свяжите свой выбор с ($i18n.locale) в html

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

Примечание: символ @ перед фигурными скобками объясняется тем, что этот код находится в моем файле.blade.php. Если вы находитесь в файле.vue, это примечание необходимо.