почему моя функция asyn c выходит пустой - PullRequest
Новая
       26

почему моя функция asyn c выходит пустой

0 голосов
/ 21 апреля 2020 
<div class="pt-5" v-for="category in categories" :key="category.id">
    <h2 class="mb-0 px-1 mx-0 text-white bg-dark w-100">{{ category.name }}</h2>
    <div class="row">
        <div class="col-md-2 col-6" v-for="product in products(category.id)" :key="product.id">
            <product class="product-height" :product="product"></product>
        </div>
    </div>
</div>

Я хочу показать 6 товаров для каждой категории. Я не могу просто заставить его работать! 

async products(param){
    const { data } = await axios.get('url/?query='+param)
    return data
}

EDITED
Хорошо, у меня есть две конечные точки, которые обрабатывают данные категорий и продуктов. Данные продуктов имеют атрибуты категорий (Массив объектов), которые указывают на каждую категорию.

Я хочу переназначить данные каждой категории, чтобы они содержали свойство, указывающее на массив продуктов.
После повторного -map, каждая категория должна быть: 

{
    att1: data1,
    att2: data2,
    att..n: data..n,
    products: Array of products
}

Я сделал это 

getCategoriesWithProducts(){
    var categories = this.$store.state.products.categories
    categories.map(category => {
        return this.axios.get('products?category='+category.id).then(({data}) => {
            category['products'] = data.slice(0, 6)
            return category
         })
    })
    return categories
}

Теперь страница загружается впервые, когда я получил Array []. Но когда страница refre sh, массив был заполнен. Теперь это не мое предназначение, мне нужно заполнить массив при первой загрузке страницы.

Тем временем я использую VueJS. он не работает на созданном или смонтированном крюке.

...