added lesson 28 code

Shaun Pelling · Shaun Pelling · commit 89bedc6bf9ee · 2017-04-03T10:23:54.000+01:00
diff --git a/src/App.vue b/src/App.vue
@@ -1,32 +1,26 @@
 <template>
     <div>
-        <form-helper>
-            <div slot="form-header">
-                <h3>This is the title of a form</h3>
-                <p>This is some info about the form</p>
-            </div>
-            <div slot="form-fields">
-                <input type="text" placeholder="name" required />
-                <input type="password" placeholder="password" required />
-            </div>
-            <div slot="form-controls">
-                <button v-on:click="handleSubmit">Submit</button>
-            </div>
-        </form-helper>
+        <keep-alive>
+            <component v-bind:is="component"></component>
+        </keep-alive>
+        <button v-on:click="component = 'form-one'">Show form one</button>
+        <button v-on:click="component = 'form-two'">Show form two</button>
     </div>
 </template>
 
 <script>
 // Imports
-import formHelper from './components/formHelper.vue'
+import formOne from './components/formOne.vue';
+import formTwo from './components/formTwo.vue';
 
 export default {
     components: {
-        'form-helper': formHelper
+        'form-one': formOne,
+        'form-two': formTwo
     },
     data () {
         return {
-
+            component: 'form-one'
         }
     },
     methods: {
diff --git a/src/components/formOne.vue b/src/components/formOne.vue
@@ -0,0 +1,46 @@
+<template>
+    <div>
+        <form-helper>
+            <div slot="form-header">
+                <h3>Form One - Contact Us</h3>
+                <p>Fill in this form to contact us</p>
+            </div>
+            <div slot="form-fields">
+                <input type="text" placeholder="name" required />
+                <label>Your Message:</label>
+                <textarea></textarea>
+            </div>
+            <div slot="form-controls">
+                <button v-on:click="handleSubmit">Send</button>
+            </div>
+        </form-helper>
+    </div>
+</template>
+
+<script>
+// Imports
+import formHelper from './formHelper.vue'
+
+export default {
+    components: {
+        'form-helper': formHelper
+    },
+    data () {
+        return {
+
+        }
+    },
+    methods: {
+        handleSubmit: function(){
+            alert('thanks for submitting form one & contacting us');
+        }
+    }
+}
+</script>
+
+<style>
+body{
+    margin: 0;
+    font-family: 'Nunito SemiBold';
+}
+</style>
diff --git a/src/components/formTwo.vue b/src/components/formTwo.vue
@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <form-helper>
+            <div slot="form-header">
+                <h3>Form Two - Log In</h3>
+                <p>Enter your details to log-in</p>
+            </div>
+            <div slot="form-fields">
+                <input type="text" placeholder="username" required />
+                <input type="password" placeholder="password" required />
+            </div>
+            <div slot="form-controls">
+                <button v-on:click="handleSubmit">Login</button>
+            </div>
+        </form-helper>
+    </div>
+</template>
+
+<script>
+// Imports
+import formHelper from './formHelper.vue'
+
+export default {
+    components: {
+        'form-helper': formHelper
+    },
+    data () {
+        return {
+
+        }
+    },
+    methods: {
+        handleSubmit: function(){
+            alert('thanks for logging in (form two)');
+        }
+    }
+}
+</script>
+
+<style>
+body{
+    margin: 0;
+    font-family: 'Nunito SemiBold';
+}
+</style>
