85 lines
2.5 KiB
Vue
85 lines
2.5 KiB
Vue
<template>
|
|
<div class="blog-edit">
|
|
<container>
|
|
<a href="javascript:void(0)" @click="gotoArticle" v-if="!!this.id"><i class="fas fa-eye"></i> View Article</a>
|
|
<div class="article-form">
|
|
<input type="text" v-model="title">
|
|
<markdown-editor ref="editor" :render="false" @update:html="html = $event" @save="save" :rows="20"></markdown-editor>
|
|
</div>
|
|
<div class="article-render">
|
|
<h1>{{ this.title }}</h1>
|
|
<div v-html="html"></div>
|
|
</div>
|
|
</container>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Container from "../components/Container.vue";
|
|
import MarkdownEditor from "../components/MarkdownEditor";
|
|
|
|
export default {
|
|
components: {
|
|
Container,
|
|
MarkdownEditor,
|
|
},
|
|
data() {
|
|
return {
|
|
html: "",
|
|
title: "",
|
|
errors: null,
|
|
};
|
|
},
|
|
props: {
|
|
id: undefined,
|
|
},
|
|
mounted() {
|
|
if (!!this.id) {
|
|
axios.get(`/api/blog/${this.id}`)
|
|
.then(res => {
|
|
this.$refs.editor.setContent(res.data.content, false);
|
|
this.title = res.data.title;
|
|
});
|
|
}
|
|
},
|
|
methods: {
|
|
save(markdown) {
|
|
console.log(markdown);
|
|
if (!!this.id) {
|
|
// Update existing post
|
|
axios.put(`/api/blog/${this.id}`, {
|
|
title: this.title,
|
|
content: markdown,
|
|
})
|
|
// It returns a 204 - No content if successful, so no need for a `.then()`
|
|
.catch(error => {
|
|
this.errors = error.errors;
|
|
});
|
|
} else {
|
|
// Store new post
|
|
axios.post('/api/blog', {
|
|
title: this.title,
|
|
content: markdown,
|
|
})
|
|
.then(res => {
|
|
this.$router.push({ name: 'blog-article-edit', params: { id: res.data.id }});
|
|
})
|
|
.catch(error => {
|
|
this.errors = error.errors;
|
|
});
|
|
}
|
|
},
|
|
gotoArticle() {
|
|
this.$router.push({ name: 'blog-article', params: { id: this.id }});
|
|
},
|
|
},
|
|
beforeRouteLeave(to, from, next) {
|
|
if (this.$refs.editor.canRouteChange()) {
|
|
next();
|
|
} else {
|
|
next(false);
|
|
}
|
|
}
|
|
}
|
|
</script>
|