时间戳

首页 > 解决方案 > 溢出时动态删除 v-for 迭代

vue.js - 溢出时动态删除 v-for 迭代

问题描述

我有这个代码

<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 时，图像非常适合我的页面。

一旦我尝试调整页面大小，图像就会在右侧开始溢出。

你知道如何在溢出时立即隐藏我的最后一张图片吗？

我知道 vuetify 断点是不够的，因为它会让图像在某些屏幕上溢出。

提前致谢。

标签： vue.jsdynamicnuxt.jsvuetify.jsoverflow

解决方案

我终于弄明白了。

我overflow-y-auto在v-row. 然后我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
    }
  },

推荐阅读