vuetify 2 v-data-table, вложенная в циклы - PullRequest
Новая
       11

vuetify 2 v-data-table, вложенная в циклы

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

Итак, у меня есть это: 

    <div v-for="team in teams" :key="team['.key']">
      <h2>{{ team.teamname }}</h2>
      <div v-for="playerId in team.players" :key="playerId['.key']">
        <p>{{ players[playerId].firstname }}</p>
        <p>{{ players[playerId].lastname }}</p>
      </div>
    </div>

, и я хотел бы использовать вместо него v-data-table, но не могу заполнить дочерние данные. На данный момент я застрял: 

<v-data-table
      :headers="tHeaders"
      :items="Object.values(teams)"
      :items-per-page="5"
      class="elevation-1"
      group-key="team.players.player['.key']"
    >
    </v-data-table>

модель данных (json): 

  "players": {
    "p1": {
      ".key": "p1",
      "firstname": "John",
      "lastname": "Smith",
      "jerseynumber": 10,
      "teams": {
        "t1": "t1"
      },
      "userId": "u1"
    },
    "p2": {
      ".key": "p2",
      "firstname": "Audrey",
      "lastname": "Jones",
      "jerseynumber": 55,
      "teams": {
        "t2": "t2"
      },
      "userId": "u1"
    },
    "p3": {
      ".key": "p3",
      "firstname": "Bill",
      "lastname": "Nye",
      "jerseynumber": 40,
      "teams": {
        "t2": "t2"
      },
      "userId": "u1"
    },
    "p4": {
      ".key": "p4",
      "firstname": "Grace",
      "lastname": "Dilson",
      "jerseynumber": 30,
      "teams": {
        "t2": "t2"
      },
      "userId": "u1"
    },
    "p5": {
      ".key": "p5",
      "firstname": "Ameilia",
      "lastname": "Earhardt",
      "jerseynumber": 11,
      "teams": {
        "t1": "t1"
      },
      "userId": "u1"
    },
    "p6": {
      ".key": "p6",
      "firstname": "Ava",
      "lastname": "Sanderson",
      "jerseynumber": 8,
      "teams": {
        "t1": "t1"
      },
      "userId": "u1"
    }
  },
  "teams": {
    "t1": {
      ".key": "t1",
      "teamname": "Red Robins",
      "players": {
        "p1": "p1",
        "p5": "p5",
        "p6": "p6"
      },
      "userId": "u1"
    },
    "t2": {
      ".key": "t2",
      "teamname": "Blue Unicorns",
      "players": {
        "p2": "p2",
        "p3": "p3",
        "p4": "p4"
      },
      "userId": "u1"
    }
  },

Я проверил несколько кодов и проблем, но все они иметь дело с массивами, а не объектами и без ключей, поэтому я не могу отобразить дочерние данные.

...