循环遍历Vuejs中的对象数组以获取HTML选择标签答案

【问题标题】：Looping through array of object in Vuejs for HTML select tag循环遍历Vuejs中的对象数组以获取HTML选择标签
【发布时间】：2020-05-10 10:08:25
【问题描述】：

我有一组选项，我必须对其进行迭代以显示选择标记。选项数组如下所示：

options: [
            {
                doctor: 'Doctor',
                engineer: 'Engineer',
                teacher: 'Teacher',
                other: 'Other'
            }
        ]

结果应该是这样的：

<select name="occupation">
    <option value="doctor">Doctor</option>
    <option value="engineer">Engineer</option>
    <option value="teacher">Teacher</option>
    <option value="other">Other</option>
</select>

【问题讨论】：

@Spangle 哦，明白了。谢谢，下次我会彻底的。

标签： javascript arrays vue.js object

【解决方案1】：

您必须使用 v-for 来迭代选项中的项目

<select name="occupation">
    <option :value="name" v-for="(value, name) in options[0]" >{{value}}</option>
</select>

如果您的选项只包含一个元素，我更愿意这样做

options: {
       doctor: 'Doctor',
       engineer: 'Engineer',
       teacher: 'Teacher',
       other: 'Other'
 }

现在你可以在下面这样称呼它

<select name="occupation">
    <option :value="name" v-for="(value, name) in options" >{{value}}</option>
</select>

要了解更多列表渲染，请阅读此文档source

【讨论】：

item 只会给出对象。我需要对象的key 和value。
@AkhlakurRahman 考虑到您正在获得免费建议，也许对那些帮助您的人更有礼貌，因为他们不必这样做，而且您没有在问题中尝试自己解决这个问题.
@Qonvex620 是的，那会容易得多。但是数据源是这样的。谢谢。

【解决方案2】：

new Vue({
  el: '#app',
  data() {
    return {
        options: [
            {
                doctor: 'Doctor',
                engineer: 'Engineer',
                teacher: 'Teacher',
                other: 'Other'
            }
        ]
    }
  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select name="occupation">
    <option v-for="(option, index) in options[0]" :value="index">{{ option }}</option>
  </select>
</div>

【讨论】：

【解决方案3】：

<select name="occupation">
    <option v-for="(value, key) in options[0]" v-bind: value="key">{{ value }}</option>
</select>

【讨论】：

嗨@amit-maurya，也许在这里提供更多解释会很好。这段代码在做什么？它是如何工作的？这些东西对答案很有帮助，以便其他人可以理解为什么这是一个好的解决方案。