I'm a Vue JS beginner and I've created a component that repeats a grid-like section. However, I've noticed that adding a dropdown in the grid is causing a significant increase in load time. As the number of records grows, the load time will only get worse. I am in search of a solution to decrease the page load time. Here is a snippet from my code:
var obj = [];
for (var i = 0; i < 4000; i++) {
var subobj = [];
for (var j = 0; j < 100; j++) {
subobj.push({
id: j,
name: 'mukesh'
})
}
var newobj = {
'Year': 2018,
'Month': 01,
'Sale': 512,
drp: subobj,
name: "negi"
}
obj.push(newobj);
}
new Vue({
el: "#tableDemo",
data: {
sales: obj
}
})
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="tableDemo">
<table class="table table-striped">
<thead>
<tr>
<th>Month</th>
<th>Sale</th>
<th>Customer</th>
<th>Customer</th>
<th>Customer</th>
</tr>
</thead>
<tbody>
<tr v-for="(sale,i) in sales" :key="i">
<th scope="row">{{ sale.Month }}</th>
<td>{{ sale.Sale }}</td>
<td>
<select v-model="sale.name">
<option value="--Selected--">--Select--</option>
<option v-for="d in sale.drp" :value="d.name">{{d.name}}</option>
</select>
</td>
<td>
<select v-model="sale.name">
<option value="--Selected--">--Select--</option>
<option v-for="d in sale.drp" :value="d.name">{{d.name}}</option>
</select>
</td>
<td>
<select v-model="sale.name">
<option value="--Selected--">--Select--</option>
<option v-for="d in sale.drp" :value="d.name">{{d.name}}</option>
</select>
</td>
</tr>
</tbody>
</table>
<label class="control control--checkbox">
First checkbox
<input type="checkbox" checked="checked" />
<div class="control__indicator"></div>
</label>
</div>