使用Vue.js在选择输入中设置默认选择的项目

如何解决使用Vue.js在选择输入中设置默认选择的项目

我正在使用vue-i18n处理软件中的翻译。我正在尝试创建一个选择输入以在语言之间进行切换。为此，我使用以下代码：

<select class="form-control" v-model="$i18n.locale">
  <option v-for="(key,value) in languages" v-bind:key="value" :value="value">
    {{key}}
  </option>
</select>

我希望我的实际语言（$ i18n.locale）出现在我的选择输入中。但是，未选择任何语言，如下图所示。我该如何解决？

解决方法

v-for中的第一个参数是value，第二个参数是key。

Documentation。

这应该可行：

<option v-for="(value,key) in languages" :key="key" :value="value">

您在i18n的文档中有an example。

---

或者，因为您想将这些值用作键（因为它们是唯一的和原始的）：

<option v-for="lang in languages" :key="lang" :value="lang">