Question 16590 in Laravel Question posted in
The official Laravel Documentation can be found here.

is it possible to make the parameters in a .slice() dynamic in a v-for loop? – Laravel

For reference I’m using laravel 8 with blade syntax.

This line of code is part of a vue component I made:

<li class="w-3/12 md:w-auto pt-0 md:px-4 md:pt-2 md:pb-0 list-none relative" 
v-if="comic.item_type === 'b' && comic.stock > 0" 
v-for="(comic, index) in [...list].slice(0, 20)">

in the

.slice(0, 20)

I want to make the 20 dynamic. I’m using the V-for lop to render items on a page, but I want to limit the rendered items to 20 instances, until a ‘load more’ button is clicked, so the plan is to create a function that increases this parameter by 20 each time it is clicked.

I’m new to Vue, so if there is a better way to do this, please let me know!

I have tried making the second parameter a bound class, but it just (obviously) throws an error, as it’s not supposed to be used that way.

Tags:

2

Answers


  1. 0

    I would go for a computed list variable (containing the pre-filtered actual list) along with an loadMoreTimes index (how much the "load more"-button was pressed) that provides a simple access to the filtered list like so:

    computed: {
  filteredList() {
    return this.list
             .filter(comic => comic.item_type === 'b' && comic.stock > 0)
             .slice(0, (this.loadMoreTimes + 1) * 20);
  }
}

    You can then simply loop over that array

    <li class="w-3/12 md:w-auto pt-0 md:px-4 md:pt-2 md:pb-0 list-none relative" 
v-for="(comic, index) in filteredList">

    BTW: it is not a good practice to use v-if and v-for in the same element.

    Login or Signup to reply.
  2. 0

    Try like following snippet:

    const app = Vue.createApp({
  data() {
    return {
      list: [{"id": 1, "name": "aaa", "item_type": "b", "stock": 9, }, {"id": 2, "name": "bbb", "item_type": "b", "stock": 11, }, {"id": 3, "name": "ccc", "item_type": "b", "stock": 8, }, {"id": 4, "name": "ddd", "item_type": "b", "stock": 8, }, {"id": 5, "name": "eee", "item_type": "b", "stock": 8, }, {"id": 6, "name": "fff", "item_type": "a", "stock": 8, }, {"id": 7, "name": "ggg", "item_type": "b", "stock": 8, }],
      nr: 2
    }
  },
  computed: {
    filteredComics() {
      return [...this.list.filter(l => l.item_type === 'b' && l.stock > 0)]
    },
    comics() {
      return this.filteredComics.slice(0, this.nr)
    }
  },
  methods: {
    loadMore() {
      this.nr = this.nr + this.nr
    }
  }
})
app.mount('#demo')
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <ul>
    <li class="w-3/12 md:w-auto pt-0 md:px-4 md:pt-2 md:pb-0 list-none relative" v-for="(comic, index) in comics">
      {{ comic.name }}
    </li>
  </ul>
  <button @click="loadMore" v-if="nr < filteredComics.length">more</button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search