How can we adjust the number of items based on the width of the viewport in Vue.js?

Question

How can we adjust the number of items based on the width of the viewport in Vue.js?

Imagine having a template that showcases a specific number of items, like this:

<template>
  <div>
    <div v-for="item in items.slice(0, 10)" :key="item" />
  </div>
</template>

How can I adjust the number of displayed items on mobile screens by modifying the slice function?

I want to steer clear of duplicating code and creating separate lists with items.slice(0, 10) and items.slice(0, 5), and then toggling between them based on a media query because it's not sustainable.

One idea I had was to detect the viewport width when the component is mounted or during page resize events, and dynamically update the number of displayed items accordingly, but I'm unsure about the cleanliness of this approach.

This seems like a common scenario, so is there a recommended method for achieving this efficiently?

javascript vue.js

Answer 1

Answer №1

Personally, I've always found the traditional method a bit cumbersome: resorting to JavaScript for tasks that should be handled by CSS or lazy-loading.

If you're looking for an alternative, you might consider implementing this solution with the help of a package like https://github.com/scaccogatto/vue-viewports.
Here's an example:

<div v-for="item in items.slice(0, this.$currentViewport.label === 'mobile' ? 5 : 10)"
  :key="item"
/>

This approach seems to have drawn inspiration from resources like https://vuetifyjs.com/en/features/breakpoints/

Answer 2

Personally, I've always found the traditional method a bit cumbersome: resorting to JavaScript for tasks that should be handled by CSS or lazy-loading.

If you're looking for an alternative, you might consider implementing this solution with the help of a package like https://github.com/scaccogatto/vue-viewports.
Here's an example:

<div v-for="item in items.slice(0, this.$currentViewport.label === 'mobile' ? 5 : 10)"
  :key="item"
/>

This approach seems to have drawn inspiration from resources like https://vuetifyjs.com/en/features/breakpoints/

Answer 3

Answer №2

Implementing a computed flag to determine the screen width appears to be a more effective solution. You could implement it like so:

created() {
  window.addEventListener("resize", () => {
    this.screenWidth = window.innerWidth
  })
},
computed: {
 isTabletOrMobile() {
    if (this.screenWidth <= 760) {
      return true
    } else {
      return false
    }
  },
  displayedItems() {
    return (this.isTabletOrMobile) ? this.items.slice(0,5) : this.items.slice(0,10)
  }
}

With this approach, you can make use of the flag to adjust your array lengths based on different screen widths.

Answer 4

Implementing a computed flag to determine the screen width appears to be a more effective solution. You could implement it like so:

created() {
  window.addEventListener("resize", () => {
    this.screenWidth = window.innerWidth
  })
},
computed: {
 isTabletOrMobile() {
    if (this.screenWidth <= 760) {
      return true
    } else {
      return false
    }
  },
  displayedItems() {
    return (this.isTabletOrMobile) ? this.items.slice(0,5) : this.items.slice(0,10)
  }
}

With this approach, you can make use of the flag to adjust your array lengths based on different screen widths.

How can we adjust the number of items based on the width of the viewport in Vue.js?

Answer №1

Answer №2

Similar questions

Transfer the data in the columns of Sheet1 to Sheet2 and eliminate any duplicates using Google App Script

AngularJS does not run the code inside the ref once directive

Attempting to create a TypeScript + React component that can accept multiple types of props, but running into the issue where only the common prop is accessible

Step-by-step guide on eliminating the modal post-validation

Looking for a way to assign the object value to ng-model within a select tag from an array of objects? Also, curious about how to easily implement filters on ng-options?

The tagging feature in ui-select isn't working properly, showing an error message that says "Cannot read property 'length' of undefined"

How can one get rid of a sudden strong beginning?

Activating autocomplete outcomes via AJAX using Cucumber/Capybara/Selenium

Error occurs when attempting to instantiate a class with parameters that do not match any available constructor signatures

What is the best way to extract the elements within a form using Angular and automatically add them to a list?

Exploring CouchDB through Ajax to interact with a static website

Utilizing Node.js and Mongoose, effortlessly update data in Mongo DB regardless of the existence of the collection

Issue with vue-router not displaying template for nested routes

Closing a Vue modal with a button

Exploring the variations in method declarations within Vue.js

Customizing the Header Navigation in Vue App.vue Across Various Views

Is ReactJS known for its exceptional performance in rendering large matrices?

Is there a way to run a node script from any location in the command line similar to how Angular's "

Remove the JSON key from all array elements while preserving their child elements

Using an AJAX post request will result in receiving an HTML element, especially when an attachment is included with Paperclip