CODEWITHSUNDEEP
vue.js
Sanasar Yuzbashyan
Sanasar Yuzbashyan

Reputation: 764

Vue: How to dynamically change count of iterating elements in "v-for" depending on the size of the window?

I have a component where I show the files uploaded by the user. But only 9 files are displayed, and to view the rest, you need to click the Show More button. The problem is that I did everything for my screen size and therefore I am showing 9 files. I wanted to know how to dynamically change the count of these files? For example, a user can open this page on a large screen and then it will not be beautiful, because after these 9 files there will be an empty space. Hope I was able to ask the correct question. Thanks in advance.

Upvotes: 0

Views: 187

Answers (1)

Sanasar Yuzbashyan
Sanasar Yuzbashyan

Reputation: 764

I found a good solution. Maybe someone will come in handy.

computed: {
        filesLimit() {
            switch (this.$vuetify.breakpoint.name) {
                case 'xs': return 3
                case 'sm': return 3
                case 'md': return 6
                case 'lg': return 9
                case 'xl': return 20
            }
        }
    },

Upvotes: 1

Related Questions