vuetify data table , and binding data coming from json object

Question

I have a new problem. Lets say i have a JSON like this :

{
  "games": [
    {

      "players_in_game": [
        {
          "id": 1,
          "player": {
            "id": 1,
            "player": "Jack Bauer",
            "email": "[email protected]"
          }
        },
        {
          "id": 2,
          "player": {
            "id": 2,
            "player": "Chloe O'Brian",
            "email": "[email protected]"
          }
        }
      ]
    },
]

My idea is to use vuetify in order to build a table with part of this data. Thus already in the data return i initialized its headers, and the items already were bound to the computed method which already through its getter reaches to the storaged json in my random state variable(im using vuex). But still can't find the way of filling the table with data in fact.

Lets say i declared 2 headers(Player1 and Player2), and the items already bound to the api request give me 2 empty rows in the table vuetify.(cause the json object has to element) I want to pass to each correspondent header its player's name. On my html would be something like this:

<v-data-table :headers="headers" :items="method to get JSON" ">

    <tr v-for="(general) in method to get JSON" v-bind:key="general">
          <td  >{{ general.any code to reach to the player's game }}</td>
           ......
           ......
</v-data-table>

I did try to use a conventional for loop to iterate over the Json and fill the rows but didn't work. The follwing code is the script:

<script>

export default {
  name: "Games",

   data(){
       return {
        headers:[
           {
             text:'Game #',
             align: 'left',
            sortable: false,
            value: 'name',
           },
           {text:"Player 1",value:"Player 1"},
           {text:"Player 2",value:"Player 2"},
        ]
      }
     },
     computed:{
           method to get JSON:Any
     }

Any advice or help please?

To clarify, are you looking for help creating the computed property to structure the data for the table? — Nate
well yes , i did try to do it but im missing something , reason why im pleading for something giving me a advice abpout how can i proceed in this , any clue — Enrique GF
in the conventional for loop method inside the scope of v-for i would build the table with its th, tr and td, but didn't work for me — Enrique GF
Other option might be using v-simple-table instead , but i want to get a more dynamic final result — Enrique GF

Nate Nate · Accepted Answer · 2020-01-13T12:01:50

The v-data-table headers are used to set the columns, and the 'value' property within this needs to point to the key to use for that column in the items array.

The items are the rows. Please see the following example:

<template>
    <div>
        <v-data-table :headers="headers" :items="items">
    </div>
</template>

<script>
export default {
    data(){
        return {
            headers:[
                { text:'Game #',value: 'name'  },
                { text:"Player 1", value:"PlayerOne" },
                { text:"Player 2", value:"PlayerTwo" }
            ],
            items: [
                {name: 'name 1', PlayerOne: 'john', PlayerTwo: 'Mike'},
                {name: 'name 2', PlayerOne: 'James', PlayerTwo: 'Bill'}
                {name: 'name 3', PlayerOne: 'Jack', PlayerTwo: 'Ben'}
            ]
         }
    }
}
</script>

This will create a table that looks like this:

The computed would be used to take your data return it in a format that is usable for the v-data-table.

If you let me know what data you would like to use in the table I can help you write the computed property.

vuetify data table , and binding data coming from json object

1 Answers