Vuetify - 如何在数据表中生成动态值？

Question

我正在处理 JSON 数据并使用 Vuetify 的Data Tables对其进行格式化。

该文档说以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_datawhich 应该是一个计算属性，附加列名为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 -----^                                                  ]