Javascript 使用vue从json文件获取特定数据

我正在尝试添加一个选择选项。在此选项中，应该有员工的姓名。选择员工后，vue应呈现其个人资料信息，如下所示：

• 姓名：鲍勃
• 标题：Mr
• 性别:男

所有信息都存储在json文件中

<div id="app">
<div class="field">
        <label class="label employee-name">Employee Name</label>
        <div class="control">
         <select v-model="employee" class="is-small">
            <option v-for="employees in employees">{{ employee.name }}</option>
          </select>
        </div>

        <pre>{{ employee.name }}, {{ employee.gender }}, {{ employee.designation }}</pre>
    </div>
</div>

我认为这个函数有问题。任何帮助都将不胜感激

---

PS：浏览器控制台不显示任何错误或警告。

您在这里输入了一个错误：

{{employee.name}

。它应该是

v-for=“employee in employees”

，在提取回调中的另一个输入错误应该是

this.employees=employees

，而不是

this.employees=employees

。您正在将完整的员工列表保存到单个员工状态变量中。感谢@ISAE和Chase DeAnda指出拼写错误。但是我怎么能让选择按钮显示名字呢。但是在选择它之后不会呈现其他细节。我想我必须以某种方式将select选项与{{employee.name}、{{employee.gender}、{{employee.designation}绑定好。我想出来了。{{employee.name}}应该是{{employee.name}

<script type="text/json" src="./json/employees.json"></script>

<script type="text/javascript">
new Vue({
    el: '#app',
    data: {
        employee: null,
        employees: ''
    },
    created: function () {
      fetch("/json/employees.json")
        .then(r => r.json())
        .then(employees => {
          this.employee=employees;
       });
    }
});
</script>

[{
  "name": "Bob",
  "gender": "male",
  "title": "Mr"
}, {
  "name": "Alice",
  "gender": "female",
  "title": "Mrs"
}]