vuetify таблица данных и данные привязки, поступающие из объекта json - PullRequest
Новая
       5

vuetify таблица данных и данные привязки, поступающие из объекта json

0 голосов
/ 12 января 2020

У меня новая проблема. Допустим, у меня есть 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 для построения таблицы с частью этих данных. Таким образом, уже при возврате данных я инициализировал его заголовки, и элементы уже были связаны с вычисляемым методом, который уже через его метод получения достигает сохраненного значения json в моей случайной переменной состояния (я использую vuex). Но все еще не могу найти способ заполнить таблицу данными.

Допустим, я объявил 2 заголовка (Player1 и Player2), а элементы, уже связанные с запросом API, дают мне 2 пустых строки в таблица vuetify. (потому что объект 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>

Я пытался использовать обычный для l oop, чтобы перебрать 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
     }

Любой совет или помощь, пожалуйста?

1 Ответ

0 голосов
/ 13 января 2020

Заголовки 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>

Это создаст таблицу, которая выглядит следующим образом:

enter image description here

Рассчитано будет когда вы брали ваши данные, возвращайте их в формате, который можно использовать для таблицы v-data.

Если вы дадите мне знать, какие данные вы хотите использовать в таблице, я могу помочь вам написать вычисляемое свойство .

...