As I work with JSON data, my current task involves formatting it using Vuetify's Data Tables.
The official documentation provides guidance on defining table headers as shown below:
import data from './data.json'
export default {
data () {
return {
cities_data: data,
headers: [
{ text: 'City', sortable: true, value: 'city' },
{ text: '#Citizens', sortable: true, value: 'citizens' },
{ text: '#Schools', sortable: true, value: 'schools' },
{ text: 'Schools per Citizen', value: this.countSchoolsPerCitizen }
]
(...)
In trying to calculate the 'Schools per Citizen' in a computed method, here is what I attempted:
computed: {
countSchoolsPerCitizen() {
return this.schools / this.citizens
}
}
Unfortunately, this approach did not yield the expected results. No hints, errors, or warnings were displayed in the console; only empty values beneath the header titles.
If you have any insights or suggestions on how to proceed, I would greatly appreciate it!