How to make Vuetify v-for render faster

user_7868352 0
Viewed 491

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 :enter image description here

<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>
v-for vuetify.js vue.js for-loop html
1 Answers

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.

user_33224000
Related