vuetify 데이터 테이블 및 json 개체에서 가져온 바인딩 데이터

vuetify 데이터 테이블 및 json 개체에서 가져온 바인딩 데이터

새로운 문제가 생겼어요.제가 이런 JSON을 가지고 있다고 가정해 보겠습니다.

{
  "games": [
    {

      "players_in_game": [
        {
          "id": 1,
          "player": {
            "id": 1,
            "player": "Jack Bauer",
            "email": "j.bauer@ctu.gov2"
          }
        },
        {
          "id": 2,
          "player": {
            "id": 2,
            "player": "Chloe O'Brian",
            "email": "c.obrian@ctu.gov"
          }
        }
      ]
    },
]

제 생각은 이 데이터의 일부로 표를 만들기 위해 vuetify를 사용하는 것입니다.따라서 데이터 반환에서 이미 헤더를 초기화했고 항목은 이미 Getter를 통해 이미 내 임의 상태 변수(vuex 사용)의 저장된 json에 도달한 계산 방법에 바인딩되었습니다.하지만 여전히 실제로 데이터로 테이블을 채울 방법을 찾을 수 없습니다.

예를 들어, 제가 2개의 헤더(Player1과 Player2)를 선언했는데, api 요청에 이미 바인딩된 항목이 테이블에서 2개의 빈 행을 제공한다고 가정해 보겠습니다. (json 개체는 요소를 포함해야 하기 때문에) 각 해당 헤더에 해당 플레이어의 이름을 전달하고 싶습니다.제 html에는 다음과 같은 것이 있을 것입니다.

<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>

저는 Json 위에서 반복하고 행을 채우기 위해 전통적인 루프를 사용하려고 했지만 작동하지 않았습니다.다음 코드는 스크립트입니다.

<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
     }

조언이나 도움이 필요하십니까?

v-data-table 헤더는 열을 설정하는 데 사용되며, 이 안의 'value' 속성은 항목 배열에서 해당 열에 사용할 키를 가리켜야 합니다.

항목이 행입니다.다음 예를 참조하십시오.

<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>

이렇게 하면 다음과 같은 표가 만들어집니다.

계산된 데이터는 v-data-table에 사용할 수 있는 형식으로 데이터를 반환하는 데 사용됩니다.

표에 어떤 데이터를 사용하고 싶은지 알려주시면 계산된 속성 작성을 도와드리겠습니다.

언급URL : https://stackoverflow.com/questions/59699813/vuetify-data-table-and-binding-data-coming-from-json-object