AddComment
file: code/AddComment.vue
1: <template>
2: <form v-if="show_form" v-on:submit.prevent="storeComment">
3: <div>
4: <textarea
5: v-model="body" placeholder="What do you think?" required=1 rows=3 cols=60
6: v-on:focus="showFullForm()">
7: </textarea>
8: </div>
9: <div v-if="show_full">
10: <div>
11: <input v-model="username" id="username" placeholder="Who are you?" required=1 size="42"/>
12: </div>
13: <p>Preview (you can use Markdown):</p>
14: <div class="senph-preview">
15: <b>{{ username }} wrote:</b><br/>
16: <VueMarkdown :source="body" />
17: </div>
18: <div class="terms">
19: <input type="checkbox" name="terms" required=1> I agree to the following terms: senph will store your comment and your username and display it on this website. No cookies, accounts or anything else is necessary or stored. Please note that this service is currently Alpha, so things might not work and/or change in the future.
20: </div>
21: </div>
22: <input type="submit" value="Post comment">
23: </form>
24: <button v-else type="button" v-on:click="showForm()">
25: Reply
26: </button>
27: </template>
28:
29: <script>
30: import VueMarkdown from 'vue-markdown'
31:
32: export default {
33: name: 'AddComment',
34: data: function () { return {
35: body: '',
36: username: '',
37: show_full: false,
38: show_form: this.show,
39: }},
40: props: [
41: 'replyTo', 'show'
42: ],
43: components: {
44: VueMarkdown
45: },
46: methods: {
47: storeComment(){
48: this.axios.post(this.replyTo, {
49: body: this.body,
50: user_name: this.username
51: }).then(() => {
52: window.location.reload();
53: });
54: },
55: showFullForm(){
56: this.show_full=true;
57: },
58: showForm(){
59: this.show_form=true;
60: }
61: }
62: }
63: </script>
64:
65: <style scoped>
66: div.terms {
67: font-size: 0.7em;
68: }
69:
70: div.senph-preview {
71: border: solid 1px #000000
72: }
73: </style>
74: