Example: Basic v-cache configuration

v-cache-basic.vue

<template><!-- Business as usual --></template>

<script>
export default {
  name: 'BasicForm',
  data() {
    return {
      // Default setup uses 'form' object in
      // data as cache target and restore cache target
      form: {
        name: '',
        email: '',
        message: '',
        termsAccepted: false
      }
    }
  },
  watch: {
    // Watch for changes to all of form's properties
    // and trigger caching behavior
    form: {
      handler: function() {
        this.$emit("cache", this.form);
      },
      deep: true
    }
  },
  mounted() {
    // After this form is rendered, restore its form values
    // if it has any cached form values
    this.$emit("restore-cache");
  },
  methods: {
    pretendSubmitForm() {
      this.form = {
        username: "",
        email: "",
        message: "",
        termsAccepted: false
    };
    
      // Clear any cached values for this form
      this.$emit("clear-cache");
    }
  }
}
</script>