My data-table component:
<v-data-table
:headers="headers"
:items="datas"
hide-actions
class="tablazat">
<template
slot="items"
slot-scope="props">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.city }}</td>
<td class="text-xs-right">{{ props.item.phone }}</td>
<td class="text-xs-right">{{ props.item.birth }}</td>
</template>
</v-data-table>
My class:
@Component
export default class App extends Vue {
public headers = [
{ text: "Name", value: "name" },
{ text: "City", value: "city" },
{ text: "Phone", value: "phone" },
{ text: "Birth date", value: "birth" }
];
public datas = [
{
name: "Matyas Peter",
city: "Budapest",
phone: "657-976",
birth: "1953"
},
{
name: "Barnabas Hermann",
city: "Budapest",
phone: "226-835",
birth: "1985"
}
];
}
I would like to pass the data from the App class to the data-table. How can I do this? I think storing my data in different class instances would be a nice solution, but my code is not working right now either. What is the easiest solution?
Thank you in advance! :)