Question

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

姓名：鲍勃
头衔：先生
性别：男

所有信息都存储在一个 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>

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

json 文件是这样的：

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

我认为该功能有问题。任何帮助将不胜感激。

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

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

0 个答案: