时间戳

首页 > 解决方案 > 为什么 v-for & axios 不一个个加载项目？

javascript - 为什么 v-for & axios 不一个个加载项目？

问题描述

我正在使用 vue-2.6.11、axios-0.21.1、vuetify-2.4.3 创建产品网络应用程序

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

所以我希望 Next row await 直到上部完全安装或其他任何东西使它有序加载。

我的组件：

主页.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>

ItemsCarousel.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": "..."
},...]

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

标签： javascriptvue.jsvuejs2axios

解决方案

您可以创建一个计算方法来确定在任何给定时间实际显示的类别数量，并随着成功的 axios 请求而增加。

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

然后定义successfulCarouselFetches ：

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

listen对于组件中成功的 axios 请求Item-Carousel：

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

success现在，每当您的 xhr 完成工作时广播：

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

当页面加载时，页面上有一个Item-Carousel组件，它将执行第一个 XHR 请求。当组件$emit的事件时，包含 的父组件v-for将增加 ，这将successfulCarouselFetches允许 gettercategoriesForDisplay在.Item-Carouselv-for

我相信，这基本上可以满足您的要求。

推荐阅读