Skip to content

Commit f707e86

Browse files
author
Shaun Pelling
committed
added lesson 29 code
1 parent 89bedc6 commit f707e86

File tree

5 files changed

+67
-173
lines changed

5 files changed

+67
-173
lines changed

‎src/App.vue

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,24 @@
11
<template>
22
<div>
3-
<keep-alive>
4-
<component v-bind:is="component"></component>
5-
</keep-alive>
6-
<button v-on:click="component = 'form-one'">Show form one</button>
7-
<button v-on:click="component = 'form-two'">Show form two</button>
3+
<add-blog></add-blog>
84
</div>
95
</template>
106

117
<script>
128
// Imports
13-
import formOne from './components/formOne.vue';
14-
import formTwo from './components/formTwo.vue';
9+
import addBlog from './components/addBlog.vue';
1510
1611
export default {
1712
components: {
18-
'form-one': formOne,
19-
'form-two': formTwo
13+
'add-blog': addBlog
2014
},
2115
data () {
2216
return {
23-
component: 'form-one'
17+
2418
}
2519
},
2620
methods: {
27-
handleSubmit: function(){
28-
alert('thanks for submitting');
29-
}
21+
3022
}
3123
}
3224
</script>

‎src/components/addBlog.vue

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<template>
2+
<div id="add-blog">
3+
<h2>Add a New Blog Post</h2>
4+
<form>
5+
<label>Blog Title:</label>
6+
<input type="text" v-model="blog.title" required />
7+
<label>Blog Content:</label>
8+
<textarea v-model="blog.content"></textarea>
9+
</form>
10+
<div id="preview">
11+
<h3>Preview blog</h3>
12+
<p>Blog title: {{ blog.title }}</p>
13+
<p>Blog content:</p>
14+
<p style="white-space: pre">{{ blog.content }}</p>
15+
</div>
16+
</div>
17+
</template>
18+
19+
<script>
20+
// Imports
21+
22+
export default {
23+
data () {
24+
return {
25+
blog: {
26+
title: '',
27+
content: ''
28+
}
29+
}
30+
},
31+
methods: {
32+
33+
}
34+
}
35+
</script>
36+
37+
<style>
38+
#add-blog *{
39+
box-sizing: border-box;
40+
}
41+
#add-blog{
42+
margin: 20px auto;
43+
max-width: 500px;
44+
}
45+
label{
46+
display: block;
47+
margin: 20px 0 10px;
48+
}
49+
input[type="text"], textarea{
50+
display: block;
51+
width: 100%;
52+
padding: 8px;
53+
}
54+
#preview{
55+
padding: 10px 20px;
56+
border: 1px dotted #ccc;
57+
margin: 30px 0;
58+
}
59+
h3{
60+
margin-top: 10px;
61+
}
62+
</style>

‎src/components/formHelper.vue

Lines changed: 0 additions & 69 deletions
This file was deleted.

‎src/components/formOne.vue

Lines changed: 0 additions & 46 deletions
This file was deleted.

‎src/components/formTwo.vue

Lines changed: 0 additions & 45 deletions
This file was deleted.

0 commit comments

Comments
 (0)