Merge pull request iamshaunjp#2 from iamshaunjp/lesson-24

Shaun · web-flow · commit 17853ff69c37 · 2017-04-02T11:32:50.000+01:00
Lesson 24
diff --git a/src/App.vue b/src/App.vue
@@ -1,8 +1,11 @@
 <template>
     <div>
-        <app-header></app-header>
-        <app-ninjas></app-ninjas>
-        <app-footer></app-footer>
+        <app-header v-bind:title="title" v-on:changeTitle="updateTitle($event)"></app-header>
+        <app-ninjas v-bind:ninjas="ninjas"></app-ninjas>
+        <ul>
+          <li v-for="ninja in ninjas">{{ ninja.name }}</li>
+        </ul>
+        <app-footer v-bind:title="title"></app-footer>
     </div>
 </template>
 
@@ -20,8 +23,21 @@ export default {
     },
     data () {
         return {
-
+          ninjas: [
+              {name: 'Ryu', speciality: 'Vue Components', show: false},
+              {name: 'Crystal', speciality: 'HTML Wizardry', show: false},
+              {name: 'Hitoshi', speciality: 'Click Events', show: false},
+              {name: 'Tango', speciality: 'Conditionals', show: false},
+              {name: 'Kami', speciality: 'Webpack', show: false},
+              {name: 'Yoshi', speciality: 'Data Diggin', show: false}
+          ],
+          title: 'Vue Wizards'
         }
+    },
+    methods: {
+      updateTitle: function(updatedTitle){
+        this.title = updatedTitle;
+      }
     }
 }
 </script>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
@@ -1,13 +1,19 @@
 <template>
     <footer>
-        <p>{{ copyright }}</p>
+        <p>Copyright 2017 {{ title }}</p>
     </footer>
 </template>
 <script>
 export default {
+    props: {
+      title: {
+        type: String,
+        required: true
+      }
+    },
     data(){
         return{
-            copyright: 'Copyright 2017 Vue Ninjas'
+
         }
     }
 }
diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -1,14 +1,25 @@
 <template>
     <header>
-        <h1>{{ title }}</h1>
+        <h1 v-on:click="changeTitle">{{ title }}</h1>
     </header>
 </template>
 <script>
 export default {
+    props: {
+      title: {
+        type: String,
+        required: true
+      }
+    },
     data(){
         return{
-            title: 'Vue Ninjas'
+
         }
+    },
+    methods: {
+      changeTitle: function(){
+        this.$emit('changeTitle', 'Vue Ninjas');
+      }
     }
 }
 </script>
diff --git a/src/components/Ninjas.vue b/src/components/Ninjas.vue
@@ -6,21 +6,26 @@
                 <h3 v-show="ninja.show">{{ ninja.speciality }}</h3>
             </li>
         </ul>
+        <button v-on:click="deleteNinja">Delete a Ninja</button>
     </div>
 </template>
 <script>
 export default {
+    props: {
+      ninjas: {
+        type: Array,
+        required: true
+      }
+    },
     data(){
         return{
-            ninjas: [
-                {name: 'Ryu', speciality: 'Vue Components', show: false},
-                {name: 'Crystal', speciality: 'HTML Wizardry', show: false},
-                {name: 'Hitoshi', speciality: 'Click Events', show: false},
-                {name: 'Tango', speciality: 'Conditionals', show: false},
-                {name: 'Kami', speciality: 'Webpack', show: false},
-                {name: 'Yoshi', speciality: 'Data Diggin', show: false}
-            ]
+
         }
+    },
+    methods: {
+      deleteNinja: function(){
+        this.ninjas.pop();
+      }
     }
 }
 </script>
