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

65 lines
921 B
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'
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>