Upon creating a simple post list component, I encountered an error when trying to utilize the v-for directive:
"eslint-eslint: the template root disallows v-for directives"
How can I go about iterating through and displaying each post?
To pass data from a Laravel backend as a prop to the component, I am using allBehaviourPosts like this:
<related-post-list :relatedBehaviourPost= {{ $relatedBehaviourPosts }}></>
My component:
<template>
<div class="sidebar_related_content_container" v-for="behaviour in relatedBehaviourPosts " :key="behaviour.id" style="">
<a class="sidebar_related_content_image" href="/conducta-canina/{{ relatedBehaviour.slug }}" style="background-image:url('{{ behaviour.image }}');">
<div class="black_gradient" style=""></div>
</a>
<div class="sidebar_related_content_text_container" style="">
<span class="sidebar_related_content_text_title" style="">{{ behaviour.postcategory.name }}</span>
<span class="sidebar_related_content_text_description" style="">{{ behaviour.title }}</span>
</div>
</div>
</template>
<!--SCRIPTS-->
<script>
export default {
props: ['relatedBehaviourPosts'],
data: function () {
return {
//data
}
},
mounted() {
console.log('Footer mounted.')
}
}
</script>
<!--STYLES-->
<style scoped>
</style>