我如何使用 vuetify 连续调用对象？

Question

我是 vuejs 新手，我在尝试让我的对象 return 排成一列时遇到困难。

components/sellingItems.vue

<template>
  <v-container class="my-5">
    <v-row>
        <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>
    </v-row>
  </v-container>
  
</template>

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

pages/index.vue

添加 for 循环后，我的产品列表变成了一列，我更喜欢连续排列以符合我的目标

索引页

堆栈溢出不会让我 post 索引页面代码所以这里是截图

Answer 1

问题似乎是您正在为每个项目创建一个新行

<template>
  <v-container class="my-5">
    <v-row> <!-- <=== here is your row -->
      <v-col sm="6" md="4">
          ... etc
      </v-col>
    </v-row>
  </v-container>
</template>

您可以将 <v-row> 移动到父组件中并包装 <SellingItems v-for...> 或将数组 (products) 传递到组件中并在其中包含 v-for组件

<SellingItems :items="products" ... >


<template>
  <v-container class="my-5">
    <v-row> 
      <v-col sm="6" md="4" v-for="item in items"> <!-- <=== move v-for here -->
          ... etc
      </v-col>
    </v-row>
  </v-container>
</template>

Answer 2

检查这个

通过编辑您的 class 使用行和列来确定每行有多少项我在代码笔中添加了代码

https://codepen.io/Juan-Carlos-MA/pen/yLMdLRX?editors=1010

<div id="app">
  <v-app id="inspire">
    <br>
    <br>
      <v-slider
        v-model="fruits"
        :tick-labels="ticksLabels"
        :max="3"
        step="1"
        ticks="always"
        tick-size="4"
      ></v-slider>
    <div class="row">
      <div v-for="item in items" :class="selection">
        <v-card :loading="loading" class="mx-auto my-12" max-width="374">
          <template slot="progress">
            <v-progress-linear color="deep-purple" height="10" indeterminate></v-progress-linear>
          </template>

          <v-img height="250" src="https://cdn.vuetifyjs.com/images/cards/cooking.png"></v-img>

          <v-card-title>{{ item.mensaje }}</v-card-title>
          <v-divider class="mx-4"></v-divider>

          <v-card-title>{{ item.precio }}</v-card-title>

          <v-card-actions>
            <v-btn color="deep-purple lighten-2" text @click="reserve">
              Add TO CART
            </v-btn>
          </v-card-actions>
        </v-card>
      </div>
    </div>
  </v-app>
</div>

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: () => ({
    loading: false,
    selection: "col-6",
    value: 0,
    fruits: 1,
    ticksLabels: ["one", "two", "tree", "four"],
    items: [
      { mensaje: "Tamales", precio: "0" },
      { mensaje: "Atole", precio: "0" },
      { mensaje: "Taquito", precio: "0" },
      { mensaje: "Taquito", precio: "0" }
    ]
  }),

  methods: {
    reserve() {
      this.loading = true;
      setTimeout(() => (this.loading = false), 2000);
    }
  },
  watch: {
    fruits: function (val) {
      console.log(val);
      if (val == 0) {
        this.selection = "col-12";
      } else {
        if (val == 1) {
          this.selection = "col-6";
        } else {
          if (val == 2) {
            this.selection = "col-4";
          } else {
            if (val == 3) {
              this.selection = "col-3";
            }
          }
        }
      }
    }
  }
});

我如何使用 vuetify 连续调用对象？

how can i call objects in a row using vuetify?

vue.js

vuex

vuejs2

nuxt.js

vuetify.js