使用Vuetify时如何让循环渲染的商品组件横向排列而非纵向堆叠

问题根因 #

你将Vuetify栅格系统的层级拆分错误，每个商品组件内部都单独包裹了<v-container>和<v-row>，导致每渲染一个商品组件就会单独生成一行，因此呈现纵向排列的效果。

修复步骤 #

1. 调整商品组件 components/sellingItems.vue #

移除组件外层多余的容器、行标签，仅保留单个商品对应的列代码，修改后代码如下：

<template>
  <v-col
    sm="6"
    md="4"
  >
    <v-card outlined>
      <v-img :src="image" height="200px" />
      <v-card-title> {{ name}} </v-card-title>
      <v-card-subtitle> ${{ price }}</v-card-subtitle>

      <v-card-actions>
        <v-btn @click="addToCart" color="success" outlined >
          <v-icon small left> add </v-icon>
          Add to Cart
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-col>
</template>

<script>
export default {
  props: ['id', 'image', 'name', 'price'],
}
</script>

2. 调整首页 pages/index.vue 结构 #

将商品组件的循环逻辑放到统一的栅格容器和行标签内部即可，参考结构如下：

<template>
  <v-container class="my-5">
    <v-row>
      <!-- 此处替换为你原有循环调用selling-items组件的逻辑 -->
      <selling-items
        v-for="item in yourProductList"
        :key="item.id"
        v-bind="item"
      />
    </v-row>
  </v-container>
</template>

原理说明 #

Vuetify栅格系统遵循v-container > v-row > v-col的固定层级规则，所有需要横向排列的列元素必须放在同一个v-row下，才会自动按栅格规则横向排布。

内容的提问来源于stack exchange，提问作者stormm