为什么是v-for

Question

我正在使用vue-2.6创建一个产品web应用程序。11，axios-0.21。1，vuetify-2.4。3.

我从本地数组中获取类别，然后通过使用v-for将pechUrl作为道具传递到Row组件中。然后在Row组件中，我在获得API响应后，通过使用axios获取ftchUrl，我只是简单地安装它。它工作正常，但问题是类别对象意味着行组件加载随机顺序导致行组件安装，因为它从API获得axios响应。

所以我希望下一行等待，直到上部完全安装或任何其他东西，使其有序加载。

我的组件：

家vue-

<template>
    <div>
        <div v-for="(categories,index) in categories" :key="`${index}`">
            <ItemsCarousel
                :title="categories.title"
                :fetch-url="categories.fetchUrl"
            />
        </div>
    </div>
</template>
<script>
import categoriesList from '@/local-database/Categories.json';
import ItemsCarousel from '@/components/carousel/ItemsCarousel';
export default {
    name: 'Home',
    components: {
        ItemsCarousel
    },
    data: () => ({
        categories: categoriesList.filter( categories => (catalogue.for==true || categories.for=="home"))
    })
}
</script>

项目Carousel.vue-

<template>
<div class="items-carousel">
  <v-lazy v-model="isActive" :options="{threshold: 0.5}">
  <h1>{{title}}</h1>
  <div class="items-carousel" v-for="product in products" :key="product.id">
   <Card  v-bind="{...product}">/>
  </div>
  </v-lazy>
</div>
</template>

<script>
import ProductManger from '@/mixins/ProductManger';
import Card from '@/components/Card';
export default {
  name: 'ItemsCarousel',
  mixins: [ProductManger], // Axios Setup 
  components: {
    Card
  },
  props: ['title','params'],
  data: () => ({
    isActive: false,
    cards: []
  }),
  methods: {
    async loadCard() {
        this.contentMangerCore(this.params) // Function code inside mixins
        .then(res => {
            this.cards = res.data;
        })
    }
  },
  mounted() {
    this.loadCard(); 
  }
};
</script>

数据样本：-

分类表。json-

[{
    "id": 1,
    "name": "Adventure",
    "params": {
        "categories": "Adventure",
        "sort": "ASC"
    }
}, {
    "id": 2,
    "name": "Art",
    "params": {
        "categories": "Art",
        "sort": "DESC"
    }
}, {
    "id": 3,
    "name": "Beauty",
    "params": {
        "categories": "Art",
        "sort": "DESC"
    }
}, {
    "id": 4,
    "name": "Business",
    "params": {
        "categories": "Art",
        "sort": "DESC"
    }
}, {
    "id": 5,
    "name": "Craft",
    "params": {
        "categories": "Art",
        "sort": "DESC"
    }
},...]

products.json-

[{
"name": "AdventureIRC",
"img": "..."
},
{
"name": "Adventie",
"img": "..."
},...]

我希望你们能帮我解决这个问题。。。谢谢：微笑：

Answer 1

您可以创建一个计算方法，确定在任何给定时间实际显示多少类别，并通过成功的axios请求递增。

get categoriesForDisplay() {
  return this.categories.slice(0, this.successfulCarouselFetches + 1)
}

然后定义成功CarouselFetches：

data() {
  return {
    //
    successfulCarouselFetches : 0
  }
}

监听在您的Iting-Carousel组件中成功的axios请求：

<ItemsCarousel
  :title="categories.title"
  :fetch-url="categories.fetchUrl"
  @success="successfulCarouselFetches = successfulCarouselFetches + 1"
/>

现在广播成功每当您的xhr完成工作：

methods: {
    async loadCard() {
        this.contentMangerCore(this.params) // Function code inside mixins
        .then(res => {
            this.cards = res.data;
            this.$emit('success');
        })
    }
  },

当页面加载时，页面上将有一个项目旋转木马组件，该组件将执行第一个XHR请求。当组件$emit的事件发生时，包含v-for的父组件将增加成功的轮转蚀刻，这将允许getter分类显示在v-for中添加另一个项目轮转。

我相信这基本上能满足你的要求。