<template>
  <v-card>
    <v-toolbar color="purple" dark dense>
      <v-toolbar-title>{{ title }}</v-toolbar-title>
    </v-toolbar>
    <pre>{{ valueString }}</pre>
  </v-card>
</template>

<script>
const props = {
  name: 'RawDisplayer',
  title: {
    required: true,
    type: String
  },
  value: {
    required: true
  }
}

export default {
  props,
  computed: {
    valueString() {
      return JSON.stringify(this.value, null, 2)
    }
  }
}
</script>

<style scoped>
pre {
  text-align: start;
  font-size: 8px;
}
</style>
