73 lines
1.9 KiB
Vue
73 lines
1.9 KiB
Vue
|
<script setup>
|
||
|
|
|
||
|
|
const { post } = defineProps(['post'])
|
||
|
|
|
||
|
|
const { createItems } = useDirectusItems()
|
||
|
|
|
||
|
|
const comment = reactive({
|
||
|
|
post: post,
|
||
|
|
name: undefined,
|
||
|
|
email: undefined,
|
||
|
|
website: undefined,
|
||
|
|
content: undefined,
|
||
|
|
test: false,
|
||
|
|
sent: false
|
||
|
|
})
|
||
|
|
|
||
|
|
async function onSubmit () {
|
||
|
|
|
||
|
|
if (!comment.test) {
|
||
|
|
try {
|
||
|
|
const items = [{
|
||
|
|
post: comment.post,
|
||
|
|
name: comment.name,
|
||
|
|
email: comment.email,
|
||
|
|
website: comment.website,
|
||
|
|
comment: comment.content
|
||
|
|
}]
|
||
|
|
|
||
|
|
comment.sent = true
|
||
|
|
|
||
|
|
await createItems({ collection: "comments", items });
|
||
|
|
} catch (e) {}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<form v-if="!comment.sent" class="form" :state="comment" @submit.prevent="onSubmit">
|
||
|
|
<div class="group textarea">
|
||
|
|
<label for="comment">Comment</label>
|
||
|
|
<textarea v-model="comment.content" id="comment" placeholder="Start typing here" required="true" ></textarea>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="group">
|
||
|
|
<label for="name">Name</label>
|
||
|
|
<input v-model="comment.name" id="name" type="text" placeholder="Your name" required="true" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="group">
|
||
|
|
<label for="email">Email</label>
|
||
|
|
<input v-model="comment.email" id="email" type="email" placeholder="Email address" required="true" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="group">
|
||
|
|
<label for="website">Website<sub>(optional)</sub></label>
|
||
|
|
<input v-model="comment.website" id="website" type="text" placeholder="Web address" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="group hide">
|
||
|
|
<label name="test">Is this your favorite website?</label>
|
||
|
|
<input v-model="comment.test" type="checkbox" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button type="submit" >Submit</button>
|
||
|
|
|
||
|
|
</form>
|
||
|
|
<div v-if="comment.sent" class="success">
|
||
|
|
<h3>Success, your comment was submitted</h3>
|
||
|
|
<p>Thank you for supporting our blog & providing your <br>viewpoint on the topics discussed.</p>
|
||
|
|
</div>
|
||
|
|
</template>
|