[Vuejs]-How can I show (+10 more) if index is greater than value in VUEJS using v-for loop

by

3👍

✅

as I mentioned in the comment. You can create computed properties like this example and loop just through that. Don’t loop all 100 + recipient if not needed … It might end up with 1000.

computed: {
  top10() {
    return this.recipient.slice(0, 10);
  },
  rest() {
    return this.recipient.length - 10;
  }
}
👤user8672473

2👍

You can just includ a simple verification like:

<div v-for="(item, index) in recipient" class="app-splitter two-cols">
    <p>{{item.name}}</p>

    <el-button v-if="index < 10"
      style="min-width:20px"
      @click="handleDeleteRecipient(index)"
      icon="el-icon-delete"
      circle
    ></el-button>

That v-if will only allow the itens with index lower then 10 to render, i beleive that is what you want at first, but, if you want tha limit to change (like that click at +10 itens) then, create a variable starting at 10 like:

data() {
    return {
        limit: 10
    }
}

Do you v-if look at it, so change to it:

v-if="index < limit"

And implement the logic so when the user click at “+10 itens” you incress the limit variable to 20, 30, 40…

👤Julliano Osorio

Leave a comment