1👍
✅
There as a missing < before the first .
Looking at your table structure it seems you will end up with more cells in a row than the table defined column headers.
Do you need those columns to be filtered or ordered by the table rows?
If not, try just outputting to each cell:
<td>
<span v-for="Book in Books.filter((Book) => Stock.book_id === Book.id)"
:key="Book.id" style="margin-right: 0.5em">
{{ Book.name }}
</span>
</td>
<td>
<span v-for="sh in Shells.filter((sh)=>Stock.shell_id === sh.id)"
:key="sh.id" style="margin-right: 0.5em">
{{ sh.name }}
</span>
</td>
<td>
<span v-for="prbo in Purchased.filter((prbo)=>Stock.purchase_id === prbo.id)"
:key="prbo.id" style="margin-right: 0.5em">
{{ prbo.name }}
</span>
</td>
Or simple concatenating:
<td>
{{ Books.filter((Book) => Stock.book_id === Book.id).map((Book) => Book.name).join(', ') || 'no books' }}
</td>
<td>
{{ Shells.filter((sh)=>Stock.shell_id === sh.id).map((Stock) => Stock.name).join(', ') || 'no shells' }}
</td>
<td>
{{ Purchased.filter((prbo)=>Stock.purchase_id === prbo.id).map((prbo) => prbo.name).join(', ') || 'no purchases' }}
</td>
Source:stackexchange.com