1

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! :)

0 Answers0