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

【问题标题】：VueJs how to access object items in v-forVueJs 如何访问 v-for 中的对象项
【发布时间】：2020-05-10 01:10:43
【问题描述】：

我得到以下信息：

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>

我想要什么；我希望选项元素的 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>

感谢任何帮助

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

我建议您修改您的对象，以便您的代码和语言是单独的值。

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

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

【讨论】：

【解决方案2】：

你可能不想要lang[index]，因为你有嵌套的对象。在这种情况下，实际的循环索引是没有用的。对于“lang”的每个成员，您很可能希望键是您的选项值（“en”），值是打印文本（“English”）。虽然以下不是最干净的选项，但它会起作用：

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

【讨论】：

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