0

I have the following barebones component:

<template>
  <div v-for="blog in blogs">
    <h1 class="text-lg font-medium">{{ blog.title[0].text }}</h1>
    <div v-if="blog">
      <PrismicRichText :field="blog.body" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { usePrismic } from "@prismicio/vue";
import { PrismicRichText } from "@prismicio/vue";

const { client, predicate } = usePrismic();

const blogs = ref({});
async function getContent() {
  const res = await client.getByType("post");
  blogs.value = res.results.map((blog: any) => blog.data);
}

onMounted(getContent);
</script>

<style scoped></style>

When running this, the title is displayed just fine, but the body isn't displayed at all. I see the two nested div's being displayed, but there's no content. When logging the body, it is looking correctly, an array of objects. What am I doing wrong here?

Bowis
  • 541
  • 8
  • 31
  • Hey there, have you tried logging the value of `blog.body`, or just appending it in the template with `{{ blog.body }}`? If yes, what do you see? The code above looks fine to me – lihbr Jan 11 '23 at 11:59
  • Yeah i mentioned that in my post: "When logging the body, it is looking correctly, an array of objects" – Bowis Jan 11 '23 at 13:18
  • 1
    Oh my bad! That's weird, your setup looks fine then :/ I'm happy to help further but I lack some context, if you're willing to open a quick issue on GitHub (https://github.com/prismicio/prismic-vue/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) with a minimal reproduction that'd be awesome! – lihbr Jan 16 '23 at 17:47
  • Thanks for your cooperation, but I found out on the prismic forums that I had to use the SliceZone component. – Bowis Jan 16 '23 at 20:25
  • Oh, that makes sense indeed! Glad you found that! In case that helps for future issues, you can check out the templating section of the doc to know how to template each kind of field: https://prismic.io/docs/vue-template-content Cheers! – lihbr Jan 17 '23 at 15:20

0 Answers0