Spookie/assets/js/components/pages/index.vue

<template>
	<div class="box ma7 p-5">
		<h2
			v-if="page"
			v-html="page.name"
		/>
		<div
			v-if="page"
			v-html="page.content"
		/>

		<router-link
			:to="editTarget"
			variant="outline"
		>
			<button>
				<i class="fa fa-2x fa-fw fa-edit"/>
			</button>
		</router-link>
		<hr>
	</div>
</template>

<script>
import axios from 'axios'
//import h from 'highlightjs'
//import hi from 'highlightjs-line-numbers.js'

//hi.highlightAll()
//hi.initLineNumbersOnLoad()

export default {
	name: 'PagesDisplay',
	props: {
		slug: {
			type: String,
			required: true
		}
	},
	data: () => ({
		page: null
	}),
	computed: {
		editTarget() {
			if (this.page) {
				return `/pages/edit/${this.page.slug}`
			}
			return ''
		}
	},
	beforeMount() {
		this.getPagesDetails()
		this.$watch(
			() => this.slug,
			() => {
				this.getPagesDetails()
			}
		)
	},
	methods: {
		async getPagesDetails() {
			await axios.get(`/api/pages?slug=${this.slug}`)
				.then((response) => {
					[this.page] = response.data['hydra:member']
				})
		}
	}
}
</script>