Number Templating with Vue.js

The Number field allows content writers to enter or select a number. You can set max and min values for the number.

Before Reading

This page assumes that you have already included the prismic-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's an example of how to integrate a Number field into your template.
In this example, the Number field has the API ID of number.

Copy
<template>
  <div>
    <p>Number: {{ fields.number }}</p>
  </div>
</template>

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

To learn more about the Number field check out the user guide.