我有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;
})
},
你是怎麼試用v-for的? – Bert
我會更新原始帖子,我是新來的stackoverflow不知道在哪裏迴應。 – gvon79