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

Question

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

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

这是产品的输出 列表

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

Answer 1

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

你的意思是这样的？

如果是这样的话。取而代之的是v-for在您的Product组件中使用，将其包装在v-col标签中并在那里使用 for 循环。通过这种方式，您可以使用vuetify 的网格系统并使您的设计响应多个视图端口，就像我在示例中所做的那样。

<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>