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

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型的，我明白了为什么这是行不通的。

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