I am struggling to figure out how to call the getName() function in order to change the table value. It appears that the function is not being called and the values are being directly fetched from the headers instead. Is there a way for me to change the value by properly calling getName()?
<v-data-table :headers="headers" :items="studies" :search="search" @click:row="detail">
<template slot="items" slot-scope="props">
<td>{{ props.item.title }}</td>
<td>{{ getName(props.item.user) }}</td>
<td>{{ props.item.createdAt }}</td>
</template>
</v-data-table>
headers: [
{
text: 'Title',
value: 'title',
sortable: true
},
{
text: 'Name',
value: 'user',
sortable: false
},
{
text: 'Created',
value: 'createdAt',
sortable: false
}
]
getName(val) {
this.$axios.get("http://localhost:3000/users/" + val).then(res => {
this.name = res.data.name;
});
console.log(this.name);
return this.name;
},