0

Есть файл JSON в котором находятся продукты с уникальной категорией. Необходимо эти продукты отрисовать на странице соответствующей категории. Сами же категории находятся в хранилище store в заданном объекте (categories) Вот код из хранилища

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
const sleep = m => new Promise(r => setTimeout(r, m))
const categories = [
  {
    id: 'checktape57',
    cTitle: 'Чековая лента',
    cName: 'Чековая лента 57мм',
    cSlug: 'checktape57',
    cMetaDescription: 'Мета описание',
    cDesc: 'Описание',
    products: []

  },
  {
    id: 'checktape',
    cTitle: 'Чековая лента',
    cName: 'Чековая лента 80мм',
    cSlug: 'check80',
    cMetaDescription: 'Мета описание',
    cDesc: 'Описание',
    products: []

  },
  {
    id: 'checktape',
    cTitle: 'Чековая лента',
    cName: 'Чековая лента 44мм',
    cSlug: 'check44',
    cMetaDescription: 'Мета описание',
    cDesc: 'Описание',
    products: []

  },

  {
    id: 'checktape',
    cTitle: 'Чековая лента',
    cName: 'Лента для банкоматов',
    cSlug: 'checktape',
    cMetaDescription: 'Мета описание',
    cDesc: 'Описание',
    products: []

  },

  {
    id: 'termolabel',
    cTitle: 'Термоэтикетки',
    cName: 'Термоэтикетки',
    cSlug: 'termolabel',
    cMetaDescription: 'Мета описание',
    cDesc: 'Описание',
    products: []
  }
]



function addProductsToCategory (products, category) {
  const categoryInner = { ...category, products: [] }
  category.products.map(p => {
    if (p.category_id === category.id) {
      categoryInner.products.push({
        id: p.id,
        pName: p.pName,
        pSlug: p.pSlug,
        pPrice: p.pPrice
      })
    }
  })
  console.log(products)
  return categoryInner

}

export const state = () => ({
  categoriesList: [],
  currentCategory: {},
  currentProduct: {}
})
export const mutations = {
  SET_CATEGORIES_LIST (state, categories) {
    state.categoriesList = categories
  },
  SET_CURRENT_CATEGORY (state, category) {
    state.currentCategory = category
  },
  SET_CURRENT_PRODUCT (state, product) {
   state.currentProduct = product
  }
}
export const actions = {
  async getCategoriesList ({ commit }) {
    try {
      await sleep()
      await commit('SET_CATEGORIES_LIST', categories)
    } catch (err) {
      console.log(err)
      throw new Error('Внутреняя ошибка сервера, сообщите администратору')
    }
  },
  async getCurrentCategory ({ commit }, { route }) {
    await sleep()
    const category = categories.find((cat) => cat.cSlug === route.params.CategorySlug)
    const products = await axios.get('/mock/products.json')
    await commit('SET_CURRENT_CATEGORY', addProductsToCategory(products, category))

  }

}

в Network json файл приходит но на страницу не отрисовываются продукты:

 <div v-for="product in category.products" :key="product.id">
    <ProductBrief :product="product"/>
 </div>

и если выводить в консоль содержимое category.products , то он пуст. Помогите пожалуйста, не понимаю что я упустил

1
  • @gregman вот код компонента <template> <div class="wrapper"> <nuxt-link :to="/product/${product.pSlug}"> <p>{{ product.pName }}</p> </nuxt-link> <p>Цена {{ product.pPrice }}</p> </div> </template> <script> export default { props: { product: { type: Object, default: () => {} } } } </script> 28 апр 2020 в 20:12

1 ответ 1

0

Что будет если в шаблон вывести {{category.products}} над

<div v-for="product in category.products" :key="product.id"> ?

Если там пусто как и в консле, значит данный не приходят в компонент. Здесь нужно смотреть как "доставку" данных.

Здесь нет фрагмента компонента где получаются данные. Можешь обновить свой вопрос тогда станет яснее.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.