Vuetify - Как генерировать значения Dynami c в таблицах данных?

Question

Я обрабатываю JSON данные и форматирую их с помощью Таблиц данных Vuetify .

В документации говорится, что таблица headers должна определяться следующим образом:

import data from './data.json'

export default {
    data () {
        return {
            cities_data: data,
            headers: [
                { text: 'City', sortable: true, value: 'city' },  // 'city', 'citizens', etc., are JSON keys
                { text: '#Citizens', sortable: true, value: 'citizens' },
                { text: '#Schools', sortable: true, value: 'schools' },
                { text: 'Schools per Citizen', value: this.countSchoolsPerCitizen }
            ]
(...)

В computed методах я пробовал это:

computed: {
    countSchoolsPerCitizen() {
        return this.schools / this.citizens
    }
}

... и поскольку я здесь, вы знаете, что это не работает: -)

Консоль не дает никаких подсказок, ни ошибки, ни предупреждения не отображаются; просто есть пустые значения, отображаемые под непустым заголовком заголовка.

Есть идеи, как поступить с ним?

Answer 1

Ваше cities_data, которое должно быть вычисляемым свойством с дополнительным столбцом с именем countSchoolsPerCitizen:

computed: {
    cities_data(){
     return data.map(d=>{
       d.countSchoolsPerCitizen = d.schools / d.citizens;
       return d;   
       })
   }
}

headers, свойство данных должно иметь вид:

  headers: [
                { text: 'City', sortable: true, value: 'city' },  // 'city', 'citizens', etc., are JSON keys
                { text: '#Citizens', sortable: true, value: 'citizens' },
                { text: '#Schools', sortable: true, value: 'schools' },
                { text: 'Schools per Citizen', value: 'countSchoolsPerCitizen' }
                   //reference that additional column here -----^                                      
            ]