Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I'm trying to display data via axios in my vuetify datatable but I can't get it to work.
Table
<div class="px-2">
<v-text-field label="search" v-model="search"></v-text-field>
<v-data-table
:headers="headers"
:items="desserts"
:options.sync="pagination"
:server-items-length="totalDesserts"
:loading="loading"
class="elevation-4"
>
<template slot="items" slot-scope="props">
<td>{{ props.item.name_category }}</td>
<td class="text-xs-right">{{ props.item.description }}</td>
</template>
</v-data-table>
</div>
Script
instead of this example
getDesserts () { return [ { name: 'Frozen Yogurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0, iron: '1%', }, { name: 'Ice cream sandwich', calories: 237, fat: 9.0, carbs: 37, protein: 4.3, iron: '1%', }, ] }
getDesserts() {
let url = "/listCategories";
axios.get(url).then(response => {
this.dataCategories = response.data;
});
return this.dataCategories;
}
I'm following the example from vuetify server side, but when I try to swap the sample data for mine with axios, I can't get it to work.
Excuse me, I'm just learning vuetify.
Where are you using getDesserts ? Because you're returning this.dataCategories when you have an Axios call right before. Since JS is asynchronous, your return statement will be executed before your then closure, which means this.dataCategories doesn't contain the desired value (undefined for the first call, previous content for subsequent calls).
I am using vuetify with server side. Following the example in the documentation, getDessetts has an array with example fixed data. I am trying to load them from a function that fetches data from dataCategories. But I can't get it to work. Even when I do the console.log of dataCategories if it brings me the data but in the getDesserts they do not appear.
example function array.
getDesserts () { return [ { name: 'Frozen Yogurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0, iron: '1%', }, { name: 'Ice cream sandwich', calories: 237, fat: 9.0, carbs: 37, protein: 4.3, iron: '1%', }, { name: 'Eclair', calories: 262, fat: 16.0, carbs: 23, protein: 6.0, iron: '7%', }, ] }
Test:
getDesserts() {
return this.datos;
},
listCategories() {
let url = "/listCategories";
axios.get(url).then(response => {
this.datos = response.data;
});
},
Post your entire code please, I can't help you with sprinkles.
Is esto:
export default { data () { return { totalDesserts: 0, desserts: [], loading: true, options: {}, headers: [ { text: 'Dessert (100g serving)', align: 'start', sortable: false, value: 'name', }, { text: 'Calories', value: 'calories' }, { text: 'Fat (g)', value: 'fat' }, { text: 'Carbs (g)', value: 'carbs' }, { text: 'Protein (g)', value: 'protein' }, { text: 'Iron (%)', value: 'iron' }, ], } }, watch: { options: { handler () { this.getDataFromApi() .then(data => { this.desserts = data.items this.totalDesserts = data.total }) }, deep: true, }, }, mounted () { this.getDataFromApi() .then(data => { this.desserts = data.items this.totalDesserts = data.total }) }, methods: { getDataFromApi () { this.loading = true return new Promise((resolve, reject) => { const { sortBy, sortDesc, page, itemsPerPage } = this.options
let items = this.getDesserts()
const total = items.length
if (sortBy.length === 1 && sortDesc.length === 1) {
items = items.sort((a, b) => {
const sortA = a[sortBy[0]]
const sortB = b[sortBy[0]]
if (sortDesc[0]) {
if (sortA < sortB) return 1
if (sortA > sortB) return -1
return 0
} else {
if (sortA < sortB) return -1
if (sortA > sortB) return 1
return 0
}
})
}
if (itemsPerPage > 0) {
items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
}
setTimeout(() => {
this.loading = false
resolve({
items,
total,
})
}, 1000)
})
},
getDesserts () {
return [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
},
]
},
},
}
what I want is to change the fixed data from getDesserts() example, for mine from axios.
getDesserts() {
let url = "/listCategories";
axios.get(url).then(response => {
this.dataCategories = response.data;
});
let test = this.dataCategories;
return test;
},
Please or to participate in this conversation.