如何在Vuetify网格系统中循环显示卡组件？

Question

注意：使用Vue.js和Vuetify.js进行功能和样式设置

我有使用来动态生成的卡片组件v-for，并且我想根据屏幕尺寸（sm / md / lg）在1/3/4卡中连续显示它们。当我将它们放置在Vuetify的网格系统中时，使用v-flex和v-layout元素卡片被最小化，而不是移动到第二行。

还有另一种解决方法吗？

<v-content>
  <v-card class="d-inline-flex" v-for="company of companies" :key="company.name">
    <v-layout >
      <v-flex md6 lg6>
        <img class="company-logo" src="../assets/img/example-logo.png" alt="company logo">
      </v-flex>
      <v-flex md6 lg6>
        <v-card-title class="headline pl-0">{{company.name}}</v-card-title>
        <article class="text-md-left text-lg-left">
          <v-btn @click="selectDashboard(href('stats', company.name))" :value="company.name"><v-icon>local_offer</v-icon></v-btn>
          <v-btn @click="selectDashboard(href('process', company.name))" :value="company.name"><v-icon>notifications</v-icon></v-btn>
          <v-btn @click="selectDashboard(href('example', company.name))" :value="company.name"><v-icon>rate_review</v-icon></v-btn>
          <v-btn @click="selectDashboard(href('alerts', company.name))" :value="company.name"><v-icon>explore</v-icon></v-btn>
          <v-btn @click="selectDashboard(href('profile', company.name))" :value="company.name"><v-icon>room</v-icon></v-btn>
        </article>
      </v-flex>
    </v-layout>
  </v-card>
</v-content>

对于一个视觉，这codepen显示图像宽度尺寸减小（但高度尺寸保持不变） - https://codepen.io/johnjleider/pen/aLXBez?editors=1111

Answer 1

接受的答案对我的 Vuetify v2 不起作用。

现在我们可以使用<v-col>，您将执行以下操作。

<v-row>
    <v-col cols="12" sm="3" md="4" v-for="(something, index) in somethingsArray" :key="index" >
        <my-component :my-data="something" />
    </v-col>
</v-row>

哪里cols="12"是一样的xs="12"，列将占据整个12位。

尺寸从最小的屏幕开始按比例增加。然后在小屏幕上，每列将占用 4 个空间，从而产生 3 列，然后对于中型和更大的屏幕，使用 3 个空间产生 4 列。

|__|__|__|__|__|__|__|__|__|__|__|__|  12 spaces in the grid
|-----------------------------------|  <-cols=12 (1 column)
|--------|--------|--------|--------|  <-sm=3 (4 columns)
|-----------|-----------|-----------|  <-md=4 and larger (3 columns)

Answer 2

该<v-flex>网格马克塞斯在12所以，如果你设置xs12的（特小断点）<v-flex xs12>，直到遇到下一个断点它会占用所有的网格宽度（如果您没有设置另一个断点一个将应用于所有最低屏幕宽度）。因此，然后设置<v-flex xs12 md6>，现在当您击中中断点时，每张卡将占用6个网格空间，这将使您可以并排放置2张卡。设置lg3，可以让您在同一空间容纳4张卡片。

您可以看到它在对您的示例进行的此修改中起作用 https://codepen.io/twandy/pen/JrxamB?editors=1001