55 lines
1.6 KiB
Vue
Executable File
55 lines
1.6 KiB
Vue
Executable File
<template>
|
|
<div class="memo-edit p-2">
|
|
<div class="flex-between mb-1">
|
|
<a href="#" @click="$router.back()" class="link">
|
|
< Back
|
|
</a>
|
|
</div>
|
|
<form @submit.prevent="submitForm">
|
|
<InputField name="name" label="Title" placeholder="Your Title" @update:field="form.name = $event" :errors="errors" />
|
|
<TextAreaField class="memo-text-area" name="memo" placeholder="Your Memo" @update:field="form.memo = $event" :errors="errors" />
|
|
|
|
<div class="flex-end">
|
|
<button @click="$router.back()" class="btn-alert mr-1">Cancel</button>
|
|
<button class="btn-primary">Add New Memo</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import InputField from "../../components/InputField";
|
|
import TextAreaField from "../../components/TextAreaField";
|
|
|
|
export default {
|
|
name: "MemoCreate",
|
|
components: {
|
|
InputField, TextAreaField
|
|
},
|
|
data: function () {
|
|
return {
|
|
form: {
|
|
'name': '',
|
|
'memo': '',
|
|
},
|
|
errors: null,
|
|
}
|
|
},
|
|
methods: {
|
|
submitForm: function () {
|
|
axios.post('/api/memos', this.form)
|
|
.then(response => {
|
|
this.$router.push(response.data.links.self)
|
|
})
|
|
.catch(errors => {
|
|
this.errors = errors.response.data.errors
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|