Hello,
I dived into your component code and found, where you need to modify it:
- You need to initialise
post
in data as an empty array, not as an object.
- You need to use
this
keyword when using fetch hooks.
- In templating, you don't need to use
this
keyword.
Code snippet:-
<template>
<div>{{posts}}</div>
<section v-for="post in posts" :key="post.id" v-bind:post="post" class="blog-post">
<h2>
{{ $prismic.asText(post.data.title) }}
</h2>
</section>
</template>
<script>
export default {
data: function() {
return {
posts:[]
}
},
async fetch() {
this.posts = (await this.$prismic.api.query(
this.$prismic.predicates.at("document.type", "page"),
{ orderings: "[my.post.date desc]" }
)).results
},
Give this a try and let me know if you have any doubt.
Thanks,
Priyanka