vue.js - 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 到达我的随机状态变量中的存储 json（我使用 vuex）。但实际上仍然找不到用数据填充表格的方法。

假设我声明了 2 个标头（Player1 和 Player2），并且已经绑定到 api 请求的项目在表 vuetify 中给了我 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>

我确实尝试使用传统的 for 循环来遍历 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
     }

请问有什么建议或帮助吗？

标签： vue.jsvuexvuetify.js

v-data-table 标题用于设置列，其中的 'value' 属性需要指向在 items 数组中用于该列的键。

项目是行。请看下面的例子：

<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 的格式返回。

如果您让我知道您想在表中使用哪些数据，我可以帮助您编写计算属性。

vue.js - vuetify 数据表，以及来自 json 对象的绑定数据

问题描述

解决方案

推荐阅读