added lesson 32 code

Shaun Pelling · Shaun Pelling · commit 10c64db91d4d · 2017-04-03T13:13:47.000+01:00
diff --git a/package.json b/package.json
@@ -9,7 +9,8 @@
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
   },
   "dependencies": {
-    "vue": "^2.2.1"
+    "vue": "^2.2.1",
+    "vue-resource": "^1.2.1"
   },
   "devDependencies": {
     "babel-core": "^6.0.0",
diff --git a/src/components/addBlog.vue b/src/components/addBlog.vue
@@ -1,7 +1,7 @@
 <template>
     <div id="add-blog">
         <h2>Add a New Blog Post</h2>
-        <form>
+        <form v-if="!submitted">
             <label>Blog Title:</label>
             <input type="text" v-model.lazy="blog.title" required />
             <label>Blog Content:</label>
@@ -21,7 +21,12 @@
             <select v-model="blog.author">
                 <option v-for="author in authors">{{ author }}</option>
             </select>
+            <hr />
+            <button v-on:click.prevent="post">Add Blog</button>
         </form>
+        <div v-if="submitted">
+            <h3>Thanks for adding your post</h3>
+        </div>
         <div id="preview">
             <h3>Preview blog</h3>
             <p>Blog title: {{ blog.title }}</p>
@@ -48,11 +53,21 @@ export default {
                 categories: [],
                 author: ''
             },
-            authors: ['The Net Ninja', 'The Angular Avenger', 'The Vue Vindicator']
+            authors: ['The Net Ninja', 'The Angular Avenger', 'The Vue Vindicator'],
+            submitted: false
         }
     },
     methods: {
-
+        post: function(){
+            this.$http.post('http://jsonplaceholder.typicode.com/posts', {
+                title: this.blog.title,
+                body: this.blog.content,
+                userId: 1
+            }).then(function(data){
+                console.log(data);
+                this.submitted = true;
+            });
+        }
     }
 }
 </script>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,10 @@
 import Vue from 'vue'
+import VueResource from 'vue-resource'
 import App from './App.vue'
 
+// Use vue-resource package
+Vue.use(VueResource);
+
 new Vue({
   el: '#app',
   render: h => h(App)
