Can the parameters in a .slice() be customized within a v-for loop?

Question

Can the parameters in a .slice() be customized within a v-for loop?

I am currently working with Laravel 8 and using blade syntax. The following code snippet is from a Vue component I created:

<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)">

within the

.slice(0, 20)

I want to make the number 20 dynamic. My goal is to limit the rendered items to 20 initially, and then allow users to load more by clicking on a button that increments this parameter by 20 each time.

As a beginner in Vue, I'm open to suggestions for better approaches if they exist!

I attempted to bind a variable as the second parameter, but it resulted in an error since it's not intended to be used in that manner.

javascript laravel vue.js vuejs3 laravel-blade

Answer 1

Answer №1

Here is an example snippet you can try:

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: {
    filteredItems() {
      return [...this.list.filter(l => l.item_type === 'b' && l.stock > 0)]
    },
    items() {
      return this.filteredItems.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="(item, index) in items">
      {{ item.name }}
    </li>
  </ul>
  <button @click="loadMore" v-if="nr < filteredItems.length">more</button>
</div>

Answer 2

Here is an example snippet you can try:

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: {
    filteredItems() {
      return [...this.list.filter(l => l.item_type === 'b' && l.stock > 0)]
    },
    items() {
      return this.filteredItems.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="(item, index) in items">
      {{ item.name }}
    </li>
  </ul>
  <button @click="loadMore" v-if="nr < filteredItems.length">more</button>
</div>

Answer 3

Answer №2

One possible solution is to utilize a computed list variable that contains the pre-filtered list alongside an index called loadMoreTimes (indicating how many times the "load more" button has been clicked) to easily access the filtered list as follows:

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

You can then iterate over this array in your template:

<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">

By the way, it's generally not recommended to use both v-if and v-for on the same element.

Answer 4

One possible solution is to utilize a computed list variable that contains the pre-filtered list alongside an index called loadMoreTimes (indicating how many times the "load more" button has been clicked) to easily access the filtered list as follows:

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

You can then iterate over this array in your template:

<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">

By the way, it's generally not recommended to use both v-if and v-for on the same element.

Can the parameters in a .slice() be customized within a v-for loop?

Answer №1

Answer №2

Similar questions

Is there a way to trigger a function from a specific div element and showcase the JSON data it retrieves in

What is the best way to handle various sections with changing structures within a complex form using react-hook-form?

Click once to expand all rows in the table with ease

Sending data using jQuery's AJAX feature

Angular Date Filtering to Show dd-mm-yyyy Format

The $mdSticky feature in AngularJS Material seems to be malfunctioning

Error: Unable to access the 'push' property of an undefined element while utilizing Vue router along with Vue 3

Discover Your Location in the Web Browser

Certain iFrame instances are unable to display specific cross-domain pages

Accessing location information using jQuery from Google's Geocoding API

What is the best way to display the current time (generated through JavaScript) within a designated div element?

The issue with Jquery .post function not functioning properly within a popup div

The v-validate feature in Vue.js seems to be encountering issues when used in conjunction with

Obtaining a group object when the property value matches the itemSearch criteria

"Embed" three.js within SmartMS

A curious phenomenon observed in the behavior of the jQuery offset() method

Access the CSV file using Office365 Excel via a scripting tool

Troubles with a Chrome Extension for JSON

Decoding an array in JSON format from PHP

Display a page in Laravel with a specific value