2 回答

TA貢獻1843條經驗 獲得超7個贊
我會使用一個計算屬性,該屬性創建一個對象,其中 Books 按 Stock ID 分組
computed: {
stocksWithBooks () {
return this.Stocks.data.map(stock => ({
...stock,
books: this.Books.filter(({ id }) => id === stock.book_id)
})
}
}
現在您可以在模板中使用它
<tr role="row" class="even" v-for="Stock in stocksWithBooks" v-bind:key="Stock.id">
<td v-for="Book in Stock.books" :key="Book.id">
{{Book.name}}
</td>
</tr>
為確保您不會因數據分配時間而出錯,您應該確保定義一些合理的初始值,例如
data() {
return {
// ...
Books: [], // not {}
// ...
Stocks: { data: [] }, // define an empty "data" array
// ...
}
}

TA貢獻1827條經驗 獲得超8個贊
不要在同一個元素中使用v-ifand ,你可以使用.v-fortemplate
<tr role="row" class="even" v-for="Stock in Stocks.data" v-bind:key="Stock.id">
<td v-for="Book in Books" :value="Book.id" :key="Book.id">
<template v-if="Stock.book_id === Book.id">
{{Book.name}}
</template>
</td>
</tr>
添加回答
舉報