Вызов функции для элемента v-data-table - PullRequest
Новая
       50

Вызов функции для элемента v-data-table

0 голосов
/ 25 января 2020

Предположим, у меня есть список объектов: 

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

У меня есть отдел в качестве другого объекта: 

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

Я реализовал геттер для отдела как: 

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

Я использую vuetify v-data-table для визуализации предметов. Теперь, как вызвать функцию getDepartmentById для загрузки названия кафедры в таблицу списка учителей. Я хочу отобразить название отдела - список преподавателей, где теперь у меня есть идентификатор отдела.

1 Ответ

0 голосов
/ 25 января 2020

Вы можете использовать этот кусок кода для шаблона: 

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