在 v-data-table 项目上调用函数

Question

假设我有一个对象列表：

[teacher {
   name: '',
   department: 'this is department id',
   .......
   .......
}]

我有部门作为另一个对象：

[department {
  id: '',
  name: '',
  ......
  .....
  }]

我已经为部门实现了getter：

state: {
    departments: [],
  },
  getters: {
    getDepartmentById: (state) => (id) => {
        return state.departments.find(d => d.id == id)
      }
  },

我正在使用 vuetify v-data-table 来渲染项目。现在如何调用getDepartmentById 函数在教师列表中加载部门名称。我想显示部门名称是教师列表，现在我有部门 ID。

Answer 1

您可以将这段代码用于模板：

<template>
  <v-data-table
    :headers="headers"
    :items="teachers"
    :items-per-page="5"
    class="elevation-1"
  ></v-data-table>
</template>

脚本的这段代码：

data: () => ({
    headers: [
      {
        text: 'Teacher',
        value: 'name' // Must contain this attribute in each teacher
      },
      {
        text: 'Teacher',
        value: 'departmentName' // Must contain this attribute in each teacher
      }
    ],
    teachers: [
    ]
}),
methods: {
    created: async() => {
        const teachersJson = await fetch(...) // call to an API
        this.teachers = teachersJson
                           .map(teacher => 
                             ({ 
                               ...teacher, // Association, same as Object.assign
                               departmentName: this.getDepartmentName(teacher.department)
                             })
                           )
    },
    getDepartmentName: (id) => {
        const department = this.$store.state.departmentsStore.findById(id)
        return department && departname.name
    }
}