Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 67527

How to set v-for index start from certain number?

$
0
0

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>

Viewing all articles
Browse latest Browse all 67527

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>