I have a v-for
loop through all the objects and assign the index number as a button id, but since the slice
function stopped it, the index will count from zero. When I change to next page, I need to retrieve the right object with the right index number. How can I access and set the index in v-for
so that I can make it start with certain number I want?
new Vue({
el: "#app",
data: {
objects: [],
limit: 12,
searchName: ""
},
computed: {
computedObj() {
var merchants = this.limit
? this.objects.slice(num, this.limit)
: this.objects;
},
filteredObjects: function() {
var self = this;
var merchants = this.limit
? this.objects.slice(num, this.limit)
: this.objects;
if (this.searchName != "") {
var merchants = this.objects;
}
return merchants.filter(function(merchant) {
return (
merchant.name.toLowerCase().indexOf(self.searchName.toLowerCase()) !==
-1
);
});
}
},
mounted() {
axios
.get("url")
// retreives an object
.then(response => (this.objects = response.data.data));
}
});
And HTML:
<tr v-for = "(object, index) in filteredObjects":key="object">
<td><a href="javascript:void(0)">{{ object.id }}</a></td>
<td>{{ object.name }}</td>
<td>{{ object.address }}</td>
<!-- <td>{{ object.device_id }}</td> -->
<td>{{ object.email }}</td>
<td>{{ object.reward_percentage }}%</td>
<td><span class="text-muted" style="white-space:nowrap;"><i class="far fa-clock"></i> Sep 22, 1997</span> </td>
<td style="white-space:nowrap;">
<div class="label label-table label-success">
<a :id="index" style="color: white" onclick="getIDView(this.id)">
<i class="ti ti-eye"></i>
</a>
</div>
<div class="label label-table label-info">
<a :id="index" style="color: white" onclick="getIDUpdate(this.id)">
<i class="ti ti-pencil"></i>
</a>
</div>
<div class="label label-table label-danger">
<a :id="index" style="color: white" onclick="getID(this.id)">
<i class="ti ti-close"></i>
</a>
</div>
</td>
</tr>