How to make Vuetify v-for render faster - html

Question

Hello i am new in vuejs and vuetify, i am now want to display item about 400colums and 6 rows, colum_id (cid) and row_id(rid) but render speed is slow sorry may i know how to improve this loop performance Thank before hand :
<v-layout>
<div class="reglahan-table-result-betting">
<tr
v-for="i in 6"
:key="i">
<td
v-for="j in 60"
:key="j">
<div
v-for="(item, k) in props.resultBetting"
:key="k">
<span
v-if="Number(item.cid) === j && Number(item.rid) === i"
:class="item.color"
/>
</div>
<span class="no-circle" />
</td>
</tr>
</div>
</v-layout>

Answer 1

Of course you can optimize that. The problem is that in your most inner loop, you loop on every element of the array. You shouldn't do that.
First you need to properly index your table, I would create a 'computed' function as such :
computed: {
indexedResultBetting: function () {
let ret = {}
self.props.resultBetting.forEach(function(item, index){
if(!item.rid in ret)
ret[item.rid] = {}
ret[item.rid][item.cid] = item.color
})
return ret
}
}
Then you can simply show that with something like :
<v-layout>
<div class="reglahan-table-result-betting">
<tr
v-for="i in Object.keys(indexedResultBetting)"
:key="i">
<td
v-for="j in Object.keys(indexedResultBetting[i])"
:key="j">
<div
<span
:class="indexedResultBetting[i][j]"
/>
</div>
<span class="no-circle" />
</td>
</tr>
</div>
</v-layout>
I haven't tested it, there is certainly some tinkering to do.