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

Question

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.

You could use e.g. window.innerHeight to read the current height of the window — Prebiusta
– Prebiusta, Commented Jun 12, 2021 at 22:36

Sanasar Yuzbashyan · Accepted Answer · 2021-06-19 14:03:20Z

1

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
            }
        }
    },

answered Jun 19, 2021 at 14:03

Sanasar Yuzbashyan

7741 gold badge8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related