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

【问题标题】：Set default selected item in select input using Vue.js使用 Vue.js 在选择输入中设置默认选定项
【发布时间】：2020-10-25 23:14:07
【问题描述】：

我正在使用 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) 在我的选择输入中显示为已选择。但是，没有选择任何语言，如下图所示。我该如何解决这个问题？

【问题讨论】：

@porloscerrosΨ vue-i18n.

标签： javascript vue.js vue-i18n

【解决方案1】：

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

【讨论】：