Есть файл 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 , то он пуст. Помогите пожалуйста, не понимаю что я упустил
/product/${product.pSlug}
"> <p>{{ product.pName }}</p> </nuxt-link> <p>Цена {{ product.pPrice }}</p> </div> </template> <script> export default { props: { product: { type: Object, default: () => {} } } } </script>