Newb question: having trouble getting slices to load

Hi, im using the template here, Sample Blog with API-based CMS in Vue.js | Prismic Help Center

my website is on page so instead of first paragraph i want to display all slices. what am i doing wrong?

<template>
  <!-- Check blog posts exist -->
  <div v-if="posts.length !== 0" class="blog-main">
    <!-- Template for blog posts -->
    <b-collapse
      class="card"
      animation="slide"
      v-for="post in posts"
      :key="(post.id, index)"
      v-bind:post="post"
      :open="isOpen == index"
      @open="isOpen = index"
    >
      <div slot="trigger" slot-scope="props" :class="[ isOpen ? cardBorder : '', cardHeader]" role="button">
        <p class="card-header-post-number">
          <span class="created-at">{{
            $prismic.richTextAsPlain(post.data.num)}}</span>
        </p>
        <p class="card-header-title">
          {{ $prismic.richTextAsPlain(post.data.title) }}
        </p>
        <a class="card-header-icon">
          <div class="plus-sign">+</div>
          <b-icon :icon="props.open ? 'menu-down' : 'menu-up'"></b-icon>
        </a>
      </div>
      <div class="card-content">
        <div class="content">
          <slices-block :slices="slices"/>
        </div>
      </div>
    </b-collapse>
  </div>
  <!-- If no blog posts return message -->
  <div v-else class="blog-main">
    <p>No Posts published at this time.</p>
  </div>
</template>

<script>
import SlicesBlock from '../components/SlicesBlock.vue'

export default {
  name: "blog-posts",
  components: {
    SlicesBlock
  },
  data() {
    return {
      isOpen: 0,
      cardHeader: 'card-header',
      posts: [],
      dateOptions: { year: "numeric", month: "short", day: "2-digit" },
      linkResolver: this.$prismic.linkResolver,
      slices: []
    };
  },
  methods: {
    getPosts() {
      //Query to get blog posts
      this.$prismic.client
        .query(this.$prismic.Predicates.at("document.type", "post"), {
          orderings: "[my.post.date]"
        })
        .then(response => {
          this.posts = response.results;
        });
    },
    getContent (uid) {
      //Query to get post content
      this.$prismic.client.getByUID('post', uid)
        .then((document) => {
          if (document) {
            this.documentId = document.id
            this.fields.title = document.data.title
            this.fields.date = document.data.date

            //Set slices as variable
            this.slices = document.data.body
          }
          else {
            //returns error page
            this.$router.push({ name: 'not-found' })
          }
        })
    }
  },
  created() {
    this.getContent(this.$route.params.uid);
    this.getPosts();
  },
  beforeRouteUpdate (to, from, next) {
    this.getContent(to.params.uid)
    next()
  },
};
</script>

Hello,

Welcome to the Prismic forum.

I'd be happy to help you. For this, I need to debug your code. It would be great if you can share your git hub repo or zip file of the project. You can send me a private message.

Looking forward to hearing from you back

Priyanka

hey there!
thanks for lending a hand.
heres the link! GitHub - cece554/mdealer

Hello, @collette

I'm troubleshooting your issue, I'll come back to you once I find the solution.

Thanks,

Priyanka

1 Like

Hello, @collette,

I checked your project code and everything looks good to me. I need more information on what you have in the repo. When I see the API, there is only one slice with the name "text". Can you add more slices in your repo and try to run the project again. If you still get the error, please share the screenshot of the console.

Hi, @priyanka thanks for taking a look. its not showing an error just not showing any content of the post

heres the JSON from prismic, please let me know if theres anything else i can provide.

{
  "Blog Post" : {
    "uid" : {
      "type" : "UID",
      "config" : {
        "label" : "UID",
        "placeholder" : "unique-identifier-for-blog-post-url"
      }
    },
    "title" : {
      "type" : "StructuredText",
      "config" : {
        "single" : "heading1",
        "label" : "Title",
        "placeholder" : "Blog Post Title..."
      }
    },
    "num" : {
      "type" : "StructuredText",
      "config" : {
        "multi" : "paragraph",
        "label" : "num",
        "placeholder" : "post number"
      }
    },
    "body" : {
      "type" : "Slices",
      "fieldset" : "Slice zone",
      "config" : {
        "labels" : {
          "image_with_caption" : [ {
            "name" : "emphasized",
            "display" : "Emphasized"
          }, {
            "name" : "image-full-width",
            "display" : "Full"
          } ]
        },
        "choices" : {
          "text" : {
            "type" : "Slice",
            "fieldset" : "Text",
            "description" : "A rich text section",
            "icon" : "text_fields",
            "non-repeat" : {
              "text" : {
                "type" : "StructuredText",
                "config" : {
                  "multi" : "paragraph, preformatted, heading2, heading3, strong, em, hyperlink, embed, list-item, o-list-item",
                  "label" : "Text",
                  "placeholder" : "Post text..."
                }
              }
            },
            "repeat" : { }
          },
          "quote" : {
            "type" : "Slice",
            "fieldset" : "Quote",
            "description" : "A quote section",
            "icon" : "format_quote",
            "non-repeat" : {
              "quote" : {
                "type" : "StructuredText",
                "config" : {
                  "single" : "paragraph",
                  "label" : "Quote",
                  "placeholder" : "Post Quote..."
                }
              }
            },
            "repeat" : { }
          },
          "image_with_caption" : {
            "type" : "Slice",
            "fieldset" : "Image with Caption",
            "description" : "An image with an optional caption",
            "icon" : "image",
            "non-repeat" : {
              "image" : {
                "type" : "Image",
                "config" : {
                  "constraint" : {
                    "width" : 1200
                  },
                  "thumbnails" : [ ],
                  "label" : "Image"
                }
              },
              "caption" : {
                "type" : "StructuredText",
                "config" : {
                  "single" : "heading3",
                  "label" : "Caption",
                  "placeholder" : "Image Caption..."
                }
              }
            },
            "repeat" : { }
          }
        }
      }
    }
  }
}

Can you please send me the screenshot of your content in Prismic? Still, I can only see one slice named "text" with only a paragraph text.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.