Vue.js + Vuetify using v-data-table within v-for

Question

I have 2 computed arrays, homeTeam and awayTeam. The code below does work to generate 2 tables to display the homeTeam and awayTeam, how can I simplify the code to only create the table once and loop through the homeTeam and awayTeam. I tried wrapping it in a v-for with an array of ['homeTeam','awayTeam], but that did not work. The computed works, everything below works, I just want to simplify the template.

<v-flex xs12 md6>
    <v-data-table :headers="headers" :items="homeTeam" hide-actions class="elevation-1 white">
        <template slot="items" scope="props">
            <td class="text-xs-right" v-model="gamesheet.number">{{ props.item.number }}</td>
            <td v-model="gamesheet.name">{{ props.item.name }}</td>
        </template>
    </v-data-table>
</v-flex>

<v-flex xs12 md6>
    <v-data-table :headers="headers" :items="awayTeam" hide-actions class="elevation-1 white">
        <template slot="items" scope="props">
            <td class="text-xs-right" v-model="gamesheet.number">{{ props.item.number }}</td>
            <td v-model="gamesheet.name">{{ props.item.name }}</td>
        </template>
    </v-data-table>
</v-flex>

_

computed: {
    homeTeam() {
        return this.players.filter((player) => {
            return player.team ==  this.gameinfo.home;
        })
    },
    awayTeam() {
        return this.players.filter((player) => {
            return player.team == this.gameinfo.away;
        })
    },
    spares() {
        return this.players.filter((player) => {
            return player.team !=  this.gameinfo.home && player.team != this.gameinfo.away;
        })
    },
},

here's my attempt with a v-for, I understand why this would not work.

    <template v-for="roster in rosters">
            <v-flex xs12 md6>
                <v-data-table :headers="headers" :items="roster" hide-actions class="elevation-1 white">
                    <template slot="items" scope="props">
                        <td class="text-xs-right" v-model="gamesheet.number">{{ props.item.number }}</td>
                        <td v-model="gamesheet.name">{{ props.item.name }}</td>
                        <td class="text-xs-right" v-model="gamesheet.position">{{ props.item.position }}</td>
                        <td class="text-xs-right" v-model="gamesheet.goal">{{ props.item.goal }}</td>
                        <td class="text-xs-right" v-model="gamesheet.assist">{{ props.item.assist }}</td>
                        <td class="text-xs-right" v-model="gamesheet.team">{{ props.item.team }}</td>
                    </template>
                </v-data-table>
            </v-flex>
        </template>

... and in the script...

    data () {
        return {
            rosters: ['homeTeam', 'awayTeam'],
        }
    },
    computed: {
        homeTeam() {
            return this.players.filter((player) => {
                return player.team ==  this.gameinfo.home;
            })
        },
        awayTeam() {
            return this.players.filter((player) => {
                return player.team == this.gameinfo.away;
            })
        },

Bert · Accepted Answer · 2017-08-12T19:24:06.707

1

I think you could use v-for in this way:

<template v-for="team in [homeTeam, awayTeam]">
  <v-flex xs12 md6>
    <v-data-table :headers="headers" :items="team" hide-actions class="elevation-1 white">
      <template slot="items" scope="props">
          <td class="text-xs-right" v-model="gamesheet.number">{{ props.item.number }}</td>
          <td v-model="gamesheet.name">{{ props.item.name }}</td>
      </template>
    </v-data-table>
  </v-flex>
</template>

There were a couple problems with your initial try. First computed values are not available to be used in the data function (they are initialized later). Second, you quoted the values, which means that rosters is just an array of two strings.

Another approach you could take would be to make rosters a computed value.

computed:{
  rosters(){
    return [this.homeTeam, this.awayTeam]
  }
}

edited Aug 12 '17 at 19:24

answered Aug 12 '17 at 19:12

Bert

80,741
17
199
164

Thanks Bert this worked! Now I'm not sure why my initial attempt did not work then, I had v-for="roster in rosters", and I was returning a data object in my script as rosters: ['homeTeam', 'awayTeam']... – gvon79 Aug 12 '17 at 19:23
@gvon79 I was just adding some information about why your initial try didn't work. See if that helps. – Bert Aug 12 '17 at 19:24
Make sure you add a key to the root items generated by the v-for so you don't end up with cached render artifacts. – Jay Nov 15 '17 at 02:27

Vue.js + Vuetify using v-data-table within v-for

1 Answers1