I'm building a Site with Prismic and VueJS for a customer of mine, but I'm stuck with the menu.
Some types are not resolving the link, and return a 404 not-found. The label only displayed.
Home and Page will resolve, other not. What I'm doing wrong?
Here is my code:
<template>
<!-- Check menus exist -->
<ul v-if="menus.length !== 0" class="menu">
<!-- Template for menus -->
<li v-for="menu in menus" :key="menu.id" class="menu__item level-1">
<prismic-link :field="menu.data.menu_link" class="menu__link link">
<h3 class="name">{{ $prismic.richTextAsPlain(menu.data.menu_label) }}</h3>
</prismic-link>
<ul v-if="menu.data.submenu !== 0" class="megamenu">
<li v-for="item in menu.data.submenu" :key="item.submenu" class="menu__item level-2">
<prismic-link :field="item.submenu_link" class="megamenu__link link">
<span>{{ $prismic.richTextAsPlain(item.submenu_label) }}</span>
</prismic-link>
</li>
</ul>
<span v-else class="empty"></span>
</li>
</ul>
<!-- If no menus return message -->
<div v-else class="menu"></div>
</template>
<script>
export default {
name: 'menu',
data() {
return {
document: null,
documentId: '',
menus: [],
menuLevel2Nav: [],
linkResolver: this.$prismic.linkResolver
}
},
methods: {
scrollToTop() {
window.scrollTo(0, 0);
},
getMenus() {
//Query to get menus
this.$prismic.client.query(
this.$prismic.Predicates.at('document.type', 'menu'),
{ orderings : '[document.first_publication_date desc]' },
).then((response) => {
this.menus = response.results;
})
},
//Function to get the first paragraph of text in a menu and limit the displayed text at 300 characters
getFirstParagraph(menu) {
const textLimit = 300;
const slices = menu.data.body;
let firstParagraph = '';
let haveFirstParagraph = false;
slices.map(function (slice) {
if (!haveFirstParagraph) {
if (slice.slice_type === "text") {
slice.primary.text.forEach(function (block) {
if (block.type === "paragraph") {
if (!haveFirstParagraph) {
firstParagraph += block.text;
haveFirstParagraph = true;
}
}
});
}
}
});
const limitedText = firstParagraph.substr(0, textLimit)
if (firstParagraph.length > textLimit) {
return limitedText.substr(0, limitedText.lastIndexOf(' ')) + '...';
} else {
return firstParagraph;
}
},
},
created() {
this.getMenus()
}
}
</script>
This is my JSON of Menu:
{
"Main" : {
"menu_link" : {
"type" : "Link",
"config" : {
"select" : "document",
"customtypes" : [ "home", "page", "team" ],
"label" : "Menu Link",
"placeholder" : "Selecteer"
}
},
"menu_label" : {
"type" : "StructuredText",
"config" : {
"single" : "heading6",
"label" : "Menu Label",
"placeholder" : "Menu Label"
}
},
"submenu" : {
"type" : "Group",
"config" : {
"fields" : {
"submenu_link" : {
"type" : "Link",
"config" : {
"select" : "document",
"customtypes" : [ "page", "author", "blogpost" ],
"label" : "Submenu Link",
"placeholder" : "Selecteer Submenu Link"
}
},
"submenu_label" : {
"type" : "StructuredText",
"config" : {
"single" : "heading6",
"label" : "Submenu Label",
"placeholder" : "Submenu Label"
}
}
},
"label" : "submenu"
}
}
}
}