在选择选项中显示对象键

Question

我正在做一个使用 VueJs 和 Django 的小项目

我有一个 JSON 响应：

[{
    'name': "amine",
    'adress': "montreal",
    'company': "apple",
    'email': "my@gmail.com",
    'phone': '5497821445449'
},{
    'name': "bill",
    'adress': "new york",
    'company': "microsoft",
    'email': "john@microsoft.com",
    'phone': '559485556555'
}]

我想在<option></option>之间显示键( name, adress, company, email, phone )

我做到了：

<option v-for="(field, i) in header" :key="i">{{ field }}</option>

但它不起作用

预期结果

<option>name</option>
<option>adress</option>
<option>company</option>
<option>email</option>
<option>phone</option>

Answer 1

尝试定义一个返回对象键的计算属性：

computer:{
  options(){
     const [firstItem]=this.body;
     return Object.keys(firstItem)
  }

}

模板：

 <option v-for="(field, i) in options" :key="i">{{ field }}</option>

Answer 2

1. list[0] 从list 数组中获取第一个对象
2. v-for="(value, name) in list[0]"循环遍历对象
3. 设定值：:value="name"
4. 设置内容：{{ name }}

Vue.config.productionTip = false;

const App = new Vue({
    el: '#root',
    template: (`
        <div>
            <select>
                <option v-for="(value, name) in list[0]" :value="name"">{{ name }}</option>
            </select>
        </div>
    `),
    data: function () {
        return {
            list: [
                {
                    'name': "amine",
                    'adress': "montreal",
                    'company': "apple",
                    'email': "my@gmail.com",
                    'phone': '5497821445449'
                },
                {
                    'name': "bill",
                    'adress': "new york",
                    'company': "microsoft",
                    'email': "john@microsoft.com",
                    'phone': '559485556555'
                }
            ]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root"></div>

将生成一个 HTML 结构，如：

<select>
    <option value="name">name</option>
    <option value="adress">adress</option>
    <option value="company">company</option>
    <option value="email">email</option>
    <option value="phone">phone</option>
</select>