在溢出时动态删除v-for迭代
在溢出时动态删除v-for迭代
提问于 2021-07-22 10:25:15
我有这个代码
<template>
<v-row v-if="instaFeed" grid-list-xs class="pl-2 pr-2">
<v-col
v-for="index in 12"
:key="index"
class="mt-3 pl-1 pr-1"
cols="1">
<a :href="instaFeed.data[index-1].permalink" target="__blank">
<v-img
:src="instaFeed.data[index-1].media_url"
/>
</a>
</v-col>
</v-row>
</template>当屏幕为1920*1080时，图像非常适合我的页面。
只要我尝试调整页面大小，图像就开始在右侧溢出。
你知道如何在overflow上立即隐藏我的上一张图片吗？
我知道vuetify断点是不够的，因为它会让图像在某些屏幕上溢出。
提前谢谢。
回答 1
Stack Overflow用户
发布于 2021-07-23 19:30:23
我终于想通了。
我在v-row中添加了overflow-y-auto类。然后，我使用一个计算的属性来创建v-for，并根据视口返回一个索引。通过这种方式，我可以用最大尺寸显示合适数量的图像，而不会溢出。
这是我的代码。
<template>
<v-row v-if="instaFeed" justify="center" grid-list-xs class="pl-2 pr-2 overflow-y-auto">
<v-col
v-for="index in imagesLoop"
:key="index"
cols="3"
sm="2"
md="1"
class="mt-3 pl-1 pr-1"
>
<a :href="instaFeed.data[index-1].permalink" target="__blank">
<v-card>
<v-img
:src="instaFeed.data[index-1].media_url"
/>
</v-card>
</a>
</v-col>
</v-row>
</template>计算出来的属性如下所示
computed: {
imagesLoop () {
switch (this.$vuetify.breakpoint.name) {
case 'xs' : return 4
case 'sm' : return 6
case 'md' : return 12
case 'lg' : return 12
case 'xl' : return 12
}
return null
}
},页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68483201
复制相关文章
相似问题
腾讯云开发者
