added lesson 30 code

Shaun Pelling · Shaun Pelling · commit 158c041cc265 · 2017-04-03T11:42:41.000+01:00
diff --git a/src/components/addBlog.vue b/src/components/addBlog.vue
@@ -3,15 +3,30 @@
         <h2>Add a New Blog Post</h2>
         <form>
             <label>Blog Title:</label>
-            <input type="text" v-model="blog.title" required />
+            <input type="text" v-model.lazy="blog.title" required />
             <label>Blog Content:</label>
-            <textarea v-model="blog.content"></textarea>
+            <textarea v-model.lazy.trim="blog.content"></textarea>
+            <div id="checkboxes">
+                <p>Blog Categories:</p>
+                <label>Ninjas</label>
+                <input type="checkbox" value="ninjas" v-model="blog.categories" />
+                <label>Wizards</label>
+                <input type="checkbox" value="wizards" v-model="blog.categories" />
+                <label>Mario</label>
+                <input type="checkbox" value="mario" v-model="blog.categories" />
+                <label>Cheese</label>
+                <input type="checkbox" value="cheese" v-model="blog.categories" />
+            </div>
         </form>
         <div id="preview">
             <h3>Preview blog</h3>
             <p>Blog title: {{ blog.title }}</p>
             <p>Blog content:</p>
             <p style="white-space: pre">{{ blog.content }}</p>
+            <p>Blog Categories:</p>
+            <ul>
+                <li v-for="category in blog.categories">{{ category }}</li>
+            </ul>
         </div>
     </div>
 </template>
@@ -24,7 +39,8 @@ export default {
         return {
             blog: {
                 title: '',
-                content: ''
+                content: '',
+                categories: []
             }
         }
     },
@@ -59,4 +75,11 @@ input[type="text"], textarea{
 h3{
     margin-top: 10px;
 }
+#checkboxes input{
+    display: inline-block;
+    margin-right: 10px;
+}
+#checkboxes label{
+    display: inline-block;
+}
 </style>
