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

<template>
	<div
		v-if="!isLoading"
		class="box p-3"
	>
		<tab-wrapper>
			<tab-content title="Visual Editor">
				<div class="editor mt-2">
					<!-- *** disbaled = true? -->
					<VueEditor v-model="page.content"/>
				</div>
			</tab-content>
			<tab-content title="Raw Content">
				<div>
					<textarea
						v-model="page.content"
						class="p-fluid"
					/>
				</div>
			</tab-content>
		</tab-wrapper>
		<button
			class="btn btn-primary mt-3 mb-2"
			@click="saveContent"
		>
			Save
		</button>
	</div>
	<div v-else>
		<i class="fa fa-spinner fa-spin fa-3x fa-fw"/>
		<span class="sr-only">Loading …</span>
	</div>
</template>

<script>

import axios from 'axios'

// Basic Use - Covers most scenarios
import { VueEditor } from 'vue3-editor'
import TabWrapper from '@/components/tabs/TabWrapper'
import TabContent from '@/components/tabs/TabContent'

export default {
	name: 'PagesEdit',
	components: {
		VueEditor,
		TabWrapper,
		TabContent
	},
	data: () => ({
		page: null,
		isLoading: true
	}),
	beforeMount() {
		const { slug } = this.$route.params
		console.log(`slug: ${slug}`)

		axios
			.get(`/api/pages?slug=${slug}`)
			.then((response) => {
				[this.page] = response.data['hydra:member']
				this.isLoading = false
			})
	},
	methods: {
		saveContent() {
			console.log(this.page)
			axios
				.put(`/api/pages/${this.page.id}`, this.page)
				.then((response) => {
					console.log(`resp:${response}`)
				})
		}
	}
}
</script>