Javascript VueJs如何访问v-for中的对象项

我得到以下信息：

Vue模板代码：

<select class="form-select" v-model="post_format.wpml_language">

<option  v-for="(lang, index) in wpml_languages" :value="lang">{{lang}} {{index}}</option>

</select>

{{lang}{{index}}

我想要什么；我希望option元素的value属性是语言代码（en/es），显示的文本是语言名称

我不确定如何在vue代码中访问对象，使其以我想要的方式显示。我试过：

<select class="form-select" v-model="post_format.wpml_language">
<option  v-for="(lang, index) in wpml_languages" :value="lang[index]">{{lang[index]}}</option> 
</select>

{{lang[index]}

---

非常感谢您提供的任何帮助

您可能不需要

lang[index]

，因为您有嵌套对象。 在本例中，实际的循环索引没有用处。对于“lang”的每个成员，您很可能希望键是您的选项值（“en”），而值是打印文本（“英语”）。虽然以下选项不是最干净的选项，但它会起作用：

<select class="form-select" v-model="post_format.wpml_language">
    <option  v-for="(lang, index) in wpml_languages" :value="Object.keys(lang)[0]">
        {{ lang[0] }}
    </option> 
</select>

{{lang[0]}

我建议您修改对象，使代码和语言成为独立的值

this.languages.filter(lang =>{
  var code = Object.keys(lang)[0];
  lang.code = code;
  lang.value = lang[code];
});

---

这将使您的代码更具可读性。链接以供参考。

该值有效，但选项的文本为空