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

Question

我有 2 个计算数组，homeTeam 和 awayTeam。下面的代码确实可以生成 2 个表格来显示 homeTeam 和 awayTeam，如何简化代码以仅创建一次表格并循环遍历 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]
  }
}