I'm new to Vue and having some difficulties, I created a component which receives a post variable as a prop, when the component mounts it fetches via axios POST request other posts related to that post (same category but different id to the received prop).
However my component is being rendered in a wonky way AND the related posts are not showing, this is what I see in my browser:
https://i.sstatic.net/JiT4W.png
And in browser's source code viewer:
https://i.sstatic.net/5LuBM.png
This is my component in my blade template (notice how I pass the prop using @json directive):
<div class="sidebar_container" style="">
<div class="sidebar_stripe_white" style=""></div>
<related-post-list :post="@json($classPost)"></related-post-list>
</div>
This is my RelatedPostList.vue component:
<template>
<div class="sidebar_related_container" style="">
<span class="sidebar_related_title" style="">Temas Relacionados</span>
<div class="sidebar_related_content_container" v-for="post in relatedPosts" :key="post.id" style="">
<a class="sidebar_related_content_image" :href="'/conducta-canina/${post.slug}'" :style="'background-image:url(${post.slug});'">
<div class="black_gradient" style=""></div>
</a>
<div class="sidebar_related_content_text_container" style="">
<span class="sidebar_related_content_text_title" style="">{{ post.postcategory.name }}</span>
<span class="sidebar_related_content_text_description" style="">{{ post.title }}</span>
</div>
</div>
</div>
</template>
<!--SCRIPTS-->
<script>
export default
{
name: 'RelatedPostList',
props: {
post: {required:true}
},
data: function () {
return {
relatedPosts: null,
id: this.post.id,
category : this.post.postcategory.name
}
},
mounted () {
console.log(this.$options.name+' component successfully mounted');
axios.post("/posts/related", this.id, this.category)
.then(response => (this.relatedPosts = response.data.relatedPosts))
.catch(error => console.log(error));
},
methods: {
},
}
</script>
<!--STYLES-->
<style scoped>
