title: Vue.js + Vuetify using v-data-table within v-for
body: <p>I have 2 computed arrays, homeTeam and awayTeam.  The code below does work to generate 2 tables to display the homeTeam and awayTeam, how can I simplify the code to only create the table once and loop through the homeTeam and awayTeam.  I tried wrapping it in a v-for with an array of ['homeTeam','awayTeam], but that did not work.  The computed works, everything below works, I just want to simplify the template.</p>
  
  <pre><code>&lt;v-flex xs12 md6&gt;
      &lt;v-data-table :headers="headers" :items="homeTeam" hide-actions class="elevation-1 white"&gt;
          &lt;template slot="items" scope="props"&gt;
              &lt;td class="text-xs-right" v-model="gamesheet.number"&gt;{{ props.item.number }}&lt;/td&gt;
              &lt;td v-model="gamesheet.name"&gt;{{ props.item.name }}&lt;/td&gt;
          &lt;/template&gt;
      &lt;/v-data-table&gt;
  &lt;/v-flex&gt;
  
  &lt;v-flex xs12 md6&gt;
      &lt;v-data-table :headers="headers" :items="awayTeam" hide-actions class="elevation-1 white"&gt;
          &lt;template slot="items" scope="props"&gt;
              &lt;td class="text-xs-right" v-model="gamesheet.number"&gt;{{ props.item.number }}&lt;/td&gt;
              &lt;td v-model="gamesheet.name"&gt;{{ props.item.name }}&lt;/td&gt;
          &lt;/template&gt;
      &lt;/v-data-table&gt;
  &lt;/v-flex&gt;
  </code></pre>
  
  <p>_  </p>
  
  <pre><code>computed: {
      homeTeam() {
          return this.players.filter((player) =&gt; {
              return player.team ==  this.gameinfo.home;
          })
      },
      awayTeam() {
          return this.players.filter((player) =&gt; {
              return player.team == this.gameinfo.away;
          })
      },
      spares() {
          return this.players.filter((player) =&gt; {
              return player.team !=  this.gameinfo.home &amp;&amp; player.team != this.gameinfo.away;
          })
      },
  },
  </code></pre>
  
  <hr>
  
  <p>here's my attempt with a v-for, I understand why this would not work.</p>
  
  <pre><code>    &lt;template v-for="roster in rosters"&gt;
              &lt;v-flex xs12 md6&gt;
                  &lt;v-data-table :headers="headers" :items="roster" hide-actions class="elevation-1 white"&gt;
                      &lt;template slot="items" scope="props"&gt;
                          &lt;td class="text-xs-right" v-model="gamesheet.number"&gt;{{ props.item.number }}&lt;/td&gt;
                          &lt;td v-model="gamesheet.name"&gt;{{ props.item.name }}&lt;/td&gt;
                          &lt;td class="text-xs-right" v-model="gamesheet.position"&gt;{{ props.item.position }}&lt;/td&gt;
                          &lt;td class="text-xs-right" v-model="gamesheet.goal"&gt;{{ props.item.goal }}&lt;/td&gt;
                          &lt;td class="text-xs-right" v-model="gamesheet.assist"&gt;{{ props.item.assist }}&lt;/td&gt;
                          &lt;td class="text-xs-right" v-model="gamesheet.team"&gt;{{ props.item.team }}&lt;/td&gt;
                      &lt;/template&gt;
                  &lt;/v-data-table&gt;
              &lt;/v-flex&gt;
          &lt;/template&gt;
  </code></pre>
  
  <p>... and in the script... </p>
  
  <pre><code>    data () {
          return {
              rosters: ['homeTeam', 'awayTeam'],
          }
      },
      computed: {
          homeTeam() {
              return this.players.filter((player) =&gt; {
                  return player.team ==  this.gameinfo.home;
              })
          },
          awayTeam() {
              return this.players.filter((player) =&gt; {
                  return player.team == this.gameinfo.away;
              })
          },
  </code></pre>