Templating the Boolean field

The Boolean field will add a switch for a true or false values for the content authors to pick from.

Before Reading

This page assumes that you have already included the @prismicio/vue plugin in your project or that you are using the Prismic Vue.js starter. Check out the Integrating with existing project page to learn how to get setup.

Usage

Here is an example of how to retrieve the value from a Boolean field which has the API ID switch.

Copy

<template>
  <div>
    <p v-if="switch"> This will print if the boolean switch equals true</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      switch: null
    };
  },
  methods: {
    // This is an example query, the important part is above.
    getContent () {
      this.$prismic.client.getSingle('example')
        .then((document) => {
          this.switch = document.data.switch;
        })
    }
  },
  created () {
    this.getContent();
  }
};
</script>