Question

我有2个计算数组，homeTeam和awayTeam。下面的代码确实可以生成2个表来显示homeTeam和awayTeam，我怎样才能简化代码只创建一次表并循环遍历homeTeam和awayTeam。我尝试用一系列[＆＃39; homeTeam＆＃39; awayTeam]将它包装在v-for中，但这不起作用。计算的工作，下面的一切工作，我只是想简化模板。

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

_

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

这是我用v-for的尝试，我理解为什么这不起作用。

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

......并在剧本中......

square

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

1 个答案: