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

Question

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

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>

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

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

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

Answer 3

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