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

            ]