CODEWITHSUNDEEP
htmlvue.jsfor-loopvuetify.jsv-for
Slack_ny
Slack_ny

Reputation: 29

How to make Vuetify v-for render faster

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>

Upvotes: 1

Views: 902

Answers (1)

Lo&#239;c
Lo&#239;c

Reputation: 11943

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.

Upvotes: 2

Related Questions