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?