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

Question

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

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

这是输出 List of products

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

Answer 1

检查我制作的这个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>

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

How to align items properly in vue row in vuetify?

vuetify.js

vuetify-tabs