Vue-i18n和列表

Question

目前，我正在使用vue-i18n进行国际化工作，并在本主题的列表中遇到了问题。语言可以使用永久导航栏上的下拉菜单进行更改。有一个包含子组件B的组件A。在这个子组件中，有两个列表，通过以下方式填充：

<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:溶胶-星期一-星期二…)

为此，我需要一种可能的方法来重新修改列表(可能是通过id，但在jQuery中没有发现任何发现)，或者是在每次语言更改时重新排列列表的方法。

有人知道这件事吗？非常感谢！AdV

Answer 1

1. 在html中将选择绑定到($i18n.locale)

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

注意:在花括号前的@符号是因为这段代码在我的.blade.php文件中。如果您在.vue文件中，则需要注意。