如何使用 vuetify 连续调用对象？答案

【问题标题】：how can i call objects in a row using vuetify?如何使用 vuetify 连续调用对象？
【发布时间】：2021-09-05 10:51:14
【问题描述】：

我是一个 vuejs 新手，我在试图让我的对象在一行中返回时遇到了困难。

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 循环后，我的产品列表变成一列，我更喜欢它在一行中以适应我的目标

索引页

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

【问题讨论】：

for 循环在哪里？
“所以不允许我发布文本代码，所以这是截图”？？你什么意思？正好相反，不要贴代码图片。

标签： vue.js vuejs2 nuxt.js vuetify.js vuex

【解决方案1】：

检查一下

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

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: "$300" },
      { mensaje: "Atole", precio: "$300" },
      { mensaje: "Taquito", precio: "$300" },
      { mensaje: "Taquito", precio: "$300" }
    ]
  }),

  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";
            }
          }
        }
      }
    }
  }
});

【讨论】：

请在同一答案中添加代码块而不是链接。

【解决方案2】：

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

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

【讨论】：