如何在 vuetify 的 vue 行中正确对齐项目?

How to align items properly in vue row in vuetify?

我有产品列表,我想在页面上显示它们

<v-tab-item
   <v-row>
      <Product v-for="n in 10" :key="n"/>
    </v-row>
<v-tab-item

这是输出 List of products

如何只制作(比如连续最多 6 个产品)并且每个产品之间的利润率相同?

检查我制作的这个codesandbox:https://codesandbox.io/s/stack-70701639-f1uc3?file=/src/components/GridExample.vue

你的意思是这样的?

如果,那么。而不是在 Product 组件中使用 v-for,而是将其包装在 v-col 标记中,并在其中使用 for 循环。这样您就可以使用 vuetify's grid system 并使您的设计响应多个视口,就像我在我的示例中所做的那样。

<v-row>
   <v-col 
      v-bind:key="n" 
      v-for="n in 10" 
      cols="12" 
      sm="6" 
      md="4" 
      lg="2"
   >   
      <CardItem/>
   </v-col>
</v-row>