[Vuejs]-Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined DataTable

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>

Leave a comment