70 lines
1.0 KiB
Vue
70 lines
1.0 KiB
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>
|