'TypeError: Cannot read properties of undefined (reading 'app') at asyncData
<script>
export default {
components: {
PageInfoSection,
ProductGrid: () => import("~/components/category/ProductGrid.vue"),
FilterSidebar: () => import("~/components/FilterSidebar.vue")
},
setup(props, {root}) {
const catIds = root.$store.state.catItemIds;
const productRangeFilterData = ref([]);
const familiesFilterData = ref([]);
const heroHerbFilterData = ref([]);
const dietaryFilterData = ref([]);
const doshaFilterData = ref([]);
const timeOfDayFilterData = ref([]);
const wellbeingTopicFilterData = ref([]);
const {
search:loadProduct,
products: allProducts,
loading: productloading
} = useProduct('cat-products');
onSSR( async () => {
await loadProduct({ids: catIds})
});
return {
allProducts,
productloading,
productRangeFilterData,
familiesFilterData,
heroHerbFilterData,
dietaryFilterData,
doshaFilterData,
timeOfDayFilterData,
wellbeingTopicFilterData
}
},
asyncData({ $CfClient, $config, error, app, route, $store, context }) {
return Promise.all([
$CfClient.getEntries({
'include': 3,
'content_type': 'pageOverview',
'locale': context.app.i18n.localeProperties.iso,
'fields.slug': route.params && route.params.slug_1 && route.fullPath.includes('category') ? `category/${route.params.slug_1}` : 'category/all'
})
]).then((entries) => {
if (entries[0].total === 0) {
return error({ statusCode: 404, message: 'This page could not be found' });
}
const pageTemplateData = getContentfulEntryItem(entries[0]);
let pageInfoTitle = pageTemplateData.title ? pageTemplateData.title : '';
let pageInfoDesc = pageTemplateData.description ? pageTemplateData.description : {};
let pageLeftRightImg = pageTemplateData.vineImage ? pageTemplateData.vineImage : {};
let gridItemData = pageTemplateData.products ? pageTemplateData.products : [];
const ids = getProductEcondedID(gridItemData);
app.store.commit('SET_CAT_ITEM_IDS', ids);
let oldgridItemData = pageTemplateData.products ? pageTemplateData.products : [];
let disableSortby = pageTemplateData.disableSortby ? pageTemplateData.disableSortby : false;
let filterGroupsData = pageTemplateData.filterGroups ? pageTemplateData.filterGroups : [];
let seoTitle = pageTemplateData.seoTitle ? pageTemplateData.seoTitle : '';
let seoDescription = pageTemplateData.seoDescription ? pageTemplateData.seoDescription : {};
let hreflangs = getHrefLangs(entries[0], $config.baseURL, route.path);
let schemas = usePukkaSchemaForLD('website',{siteName: 'PukkaHerbs',url: process.env.appURL+route.path, sameAs: []})
return {
pageInfoTitle,
pageInfoDesc,
pageLeftRightImg,
gridItemData,
disableSortby,
filterGroupsData,
oldgridItemData,
seoTitle,
seoDescription,
hreflangs,
schemas
}
})
},
mounted() {
const filterArr = [];
filterArr.push(this.$route.params.slug_1);
this.receivedFilterList();
},
methods: {
getItemsFromFilter(items, filterGroup){
return items.filter((item) => {
let matched = false;
if (item.fields.filterItems) {
item.fields.filterItems.map((filter) => {
if (filterGroup.includes(filter.fields.filterTitle && filter.fields.filterTitle)) {
matched = true;
return false;
}
})
}
return matched;
})
},
filterByProductRange(array) {
if (this.productRangeFilterData && this.productRangeFilterData.length > 0) {
const filteredProdsByProductRange = this.getItemsFromFilter(array, this.productRangeFilterData);
return this.filterByFamilies(filteredProdsByProductRange)
} else {
return this.filterByFamilies(array)
}
},
filterByFamilies(array) {
if (this.familiesFilterData && this.familiesFilterData.length > 0) {
const filteredProdsByFamily = this.getItemsFromFilter(array, this.familiesFilterData);
return this.filterByHeroHerb(filteredProdsByFamily)
} else {
return this.filterByHeroHerb(array)
}
},
filterByHeroHerb(array) {
if (this.heroHerbFilterData && this.heroHerbFilterData.length > 0) {
const filteredProdsByHeroHerb = this.getItemsFromFilter(array, this.heroHerbFilterData);
return this.filterByDietary(filteredProdsByHeroHerb)
} else {
return this.filterByDietary(array)
}
},
filterByDietary(array) {
if (this.dietaryFilterData && this.dietaryFilterData.length > 0) {
const filteredProdsByDietary = this.getItemsFromFilter(array, this.dietaryFilterData);
return this.filterByDosha(filteredProdsByDietary)
} else {
return this.filterByDosha(array)
}
},
filterByDosha(array) {
if (this.doshaFilterData && this.doshaFilterData.length > 0) {
const filteredProdsByDosha = this.getItemsFromFilter(array, this.doshaFilterData);
return this.filterByTimeOfDay(filteredProdsByDosha)
} else {
return this.filterByTimeOfDay(array)
}
},
filterByTimeOfDay(array) {
if (this.timeOfDayFilterData && this.timeOfDayFilterData.length > 0) {
const filteredProdsByTimeOfDay = this.getItemsFromFilter(array, this.timeOfDayFilterData);
return this.filterByWellbeingTopic(filteredProdsByTimeOfDay)
} else {
return this.filterByWellbeingTopic(array)
}
},
filterByWellbeingTopic(array) {
if (this.wellbeingTopicFilterData && this.wellbeingTopicFilterData.length > 0) {
const filteredProdsByWellbeingTopic = this.getItemsFromFilter(array, this.wellbeingTopicFilterData);
return this.createFilteredProducts(filteredProdsByWellbeingTopic)
} else {
return this.createFilteredProducts(array)
}
},
createFilteredProducts(array) {
this.gridItemData = array;
},
receivedFilterList(productRangeFilter, familiesFilter, heroHerbFilter, dietaryFilter, doshaFilter, timeOfDayFilter, wellbeingTopicFilter) {
this.productRangeFilterData = productRangeFilter
this.familiesFilterData = familiesFilter
this.heroHerbFilterData = heroHerbFilter
this.dietaryFilterData = dietaryFilter
this.doshaFilterData = doshaFilter
this.timeOfDayFilterData = timeOfDayFilter
this.wellbeingTopicFilterData = wellbeingTopicFilter
this.filterByProductRange(this.oldgridItemData);
}
},
computed: {
gridItems() {
return this.gridItemData;
}
},
head() {
return {
title: this.seoTitle,
meta: [
{
hid: 'description',
name: 'description',
content: this.seoDescription && this.seoDescription.content[0].content[0].value,
}
],
script: [
{
// innerHTML:this.schemas
type: "application/ld+json",
innerHTML:JSON.stringify(this.schemas)
},
],
__dangerouslyDisableSanitizers: ['script'],
link: this.hreflangs
};
}
}
</script>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|