2017-08-12 457 views
1

我有2個計算數組,homeTeam和awayTeam。下面的代碼確實可以生成2個表格來顯示homeTeam和awayTeam,我怎樣才能簡化代碼,只創建一次表格並循環遍歷homeTeam和awayTeam。我嘗試用一​​系列['homeTeam','awayTeam]將其包裝在v-for中,但這並不奏效。計算出的作品,下面的所有作品,我只是想簡化模板。Vue.js + vuetify使用v-data-table在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; 
      }) 
     }, 
+0

你是怎麼試用v-for的? – Bert

+0

我會更新原始帖子,我是新來的stackoverflow不知道在哪裏迴應。 – gvon79

回答

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

感謝伯特這工作!現在我不確定爲什麼我最初的嘗試不起作用,然後我有v-for =「花名冊名冊」,並且我在腳本中返回一個數據對象作爲花名冊:['homeTeam','awayTeam']。 .. – gvon79

+0

@ gvon79我剛剛添加了一些關於爲什麼您的初始嘗試不起作用的信息。看看是否有幫助。 – Bert

+0

是的,這有助於感謝! – gvon79