Vue.js + Vuetify 在 v-for 中使用 v-data-table

Question

我有 2 个计算数组，homeTeam 和 awayTeam。下面的代码确实可以生成 2 个 table 来显示 homeTeam 和 awayTeam，我如何简化代码以仅创建一次 table 并循环遍历 homeTeam 和 awayTeam。我尝试用 ['homeTeam','awayTeam] 数组将它包装在 v-for 中，但这没有用。计算的工作，下面的一切工作，我只是想简化模板。

<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;
        })
    },
},

这是我对 v-for 的尝试，我明白为什么这行不通。

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

...并且在脚本中...

    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;
            })
        },

Answer 1

我认为你可以这样使用 v-for：

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

您最初的尝试有几个问题。第一个计算值不可用于数据函数（它们稍后初始化）。其次，您引用了值，这意味着 rosters 只是两个字符串的数组。

您可以采用的另一种方法是使 rosters 成为计算值。

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

Vue.js + Vuetify 在 v-for 中使用 v-data-table

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

vue.js

computed-properties

v-for

vuetify.js