Коллеги, такой вопрос у меня есть. Как определить мне на клиенте,

Question

Коллеги, такой вопрос у меня есть. Как определить мне на клиенте,

сколько выводить блоков в цикле, в зависимости от разрешения экрана?

поподробнее:
есть вот такой вот код:

<v-row>
<v-col cols="6" md="2" sm="3"
v-for="product in products"
:key="product.id">
<product-default :product="product"/>
</v-col>
</v-row>

то есть,
на широком экране - все товары выводятся в одну строку в 6 колонок (и это хорошо)

на экранах поуже (планшет) - выводится в 4 колонки (но опять 6 товаров, получается некрасиво, я хочу выводить только 4 товара тут)

на мобильных экранах - выводится в 2 колонки (но тоже 6 товаров, это много, я тут тоже 4 хочу)

как мне это реализовать, пните пожалуйста где почитать ))

#frontend #javascript #programming #russian #vue.js

0

08.12.2020

3 ответов

11 просмотров

Ed 📕 Автор вопроса

v4e
не вчитался, тыкнул в vuetify grid, вам другое над...

Непонятно откуда берётся checkResolution

0

09.12.2020

v4e

Ed 📕
Непонятно откуда берётся checkResolution

его написать надо, это ж идея

0

10.12.2020

v4e · Accepted Answer

не вчитался, тыкнул в vuetify grid, вам другое надо. Топорно, как идея: mounted() { this.maxWidth = this.$parent.$el.clientWidth <v-row v-if="CheckResolution"> <v-col cols="6" md="2" sm="3" v-for="product in products" :key="product.id"> <product-default :product="product"/> </v-col> </v-row> <v-row v-else> <v-col cols="6" md="2" sm="3" v-for="product in products.slice(0,5)" :key="product.id"> <product-default :product="product"/> </v-col> </v-row>

169 похожих чатов

Коллеги, такой вопрос у меня есть. Как определить мне на клиенте,

3 ответов

Похожие вопросы