Vue.js + v-data内のv-dataテーブルを使用して

Question

私は2つの計算された配列homeTeamとawayTeamを持っています。次のコードは、homeTeamとawayTeamを表示するために2つのテーブルを生成するためのコードです。テーブルを作成して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-用と私の試みです。

私はあなたがこの方法で 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

：

<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は2つの文字列の配列に過ぎません。

もう1つのアプローチは、rostersを計算値にすることです。

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