CODEWITHSUNDEEP
laravelvue.jsvuetify.js
Edson
Edson

Reputation: 178

Display Nested data in vuetify

Hi guys new coder here... just need some help.

I want to display a nested data in vue having vuetify

here is my data:

{
    "data": [
        {
            "id": 1,
            "customer": {
                "id": 88,
                "name": "David Zulauf III",
                "mobile": "240-545-5366 x7059"
            },
            "item": "rau",
            "qty": "4",
            "fit": {
                "name": "fourth"
            },
            "shop": "Metz, Cole and McKenzie"
        },
    ],
}

I am using Laravel as a back end. not sure about the proper term but I used the Laravel resource functionality to somewhat relate my table together that's why I got this nested data.

this is my vue file and I used vuetify data tables to display the above data

<script>
  export default {
    data () {
      return {
        search: '',
        dialog: false,
        edit:false,
        items:[],
        headers: [
          {text: 'customer',align: 'start',sortable: false,value: 'customer',},
          { text: 'item', value: 'item' },
          { text: 'qty', value: 'qty' },
          { text: 'fit', value: 'fit' },
          { text: 'shop', value: 'shop' },
        ],
      }
    },
    created(){
      this.fetchItems();
    },
    methods: {
        fetchItems(){
          axios.get('api/item')
          .then(res=>{
            this.items = res.data.data;
          });
        }
      }
  }
</script>
<template>
  <v-card>
    <v-card-title>
      Items
      <v-spacer></v-spacer>
      <v-btn depressed color="primary" @click="addNew"> ADD</v-btn>
      <v-spacer></v-spacer>
      <v-text-field
        v-model="search"
        append-icon="mdi-magnify"
        label="Search"
        single-line
        hide-details
      ></v-text-field>
    </v-card-title>
    <v-data-table :headers="headers" :items="items" :search="search"></v-data-table>
  </v-card>

</template>

thank you for the help guys.

Upvotes: 1

Views: 293

Answers (2)

gluktd
gluktd

Reputation: 56

Also you can completely customise your Datatable using "item" slot and others, you can look through Vuetify documentation for getting more details.

It can be more complicated but helps when you need to get both values in same column or get different nested levels in one column.

Upvotes: 0

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

You could provide a path to that nested properties like :

     headers: [
          {text: 'name',align: 'start',sortable: false,value: 'customer.name',},
          {text: 'mobile',align: 'start',sortable: false,value: 'customer.mobile',},
          { text: 'item', value: 'item' },
          { text: 'qty', value: 'qty' },
          { text: 'fit name', value: 'fit.name' },
          { text: 'shop', value: 'shop' },
        ],

Upvotes: 1

Related Questions