added lesson 23 code

iamshaunjp · iamshaunjp · commit 87ea49b3ab03 · 2017-03-31T15:43:28.000+01:00
diff --git a/src/App.vue b/src/App.vue
@@ -1,8 +1,11 @@
 <template>
     <div>
-        <app-header></app-header>
+        <app-header v-bind:title="title"></app-header>
         <app-ninjas v-bind:ninjas="ninjas"></app-ninjas>
-        <app-footer></app-footer>
+        <ul>
+          <li v-for="ninja in ninjas">{{ ninja.name }}</li>
+        </ul>
+        <app-footer v-bind:title="title"></app-footer>
     </div>
 </template>
 
@@ -27,7 +30,8 @@ export default {
               {name: 'Tango', speciality: 'Conditionals', show: false},
               {name: 'Kami', speciality: 'Webpack', show: false},
               {name: 'Yoshi', speciality: 'Data Diggin', show: false}
-          ]
+          ],
+          title: 'Vue Wizards'
         }
     }
 }
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.title = 'Vue Ninjas';
+      }
     }
 }
 </script>
diff --git a/src/components/Ninjas.vue b/src/components/Ninjas.vue
@@ -6,6 +6,7 @@
                 <h3 v-show="ninja.show">{{ ninja.speciality }}</h3>
             </li>
         </ul>
+        <button v-on:click="deleteNinja">Delete a Ninja</button>
     </div>
 </template>
 <script>
@@ -20,6 +21,11 @@ export default {
         return{
 
         }
+    },
+    methods: {
+      deleteNinja: function(){
+        this.ninjas.pop();
+      }
     }
 }
 </script>

Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,7 @@`
`6`	`6`	`<h3 v-show="ninja.show">{{ ninja.speciality }}</h3>`
`7`	`7`	`</li>`
`8`	`8`	`</ul>`
	`9`	`+ <button v-on:click="deleteNinja">Delete a Ninja</button>`
`9`	`10`	`</div>`
`10`	`11`	`</template>`
`11`	`12`	`<script>`
`@@ -20,6 +21,11 @@ export default {`
`20`	`21`	`return{`
`21`	`22`
`22`	`23`	`}`
	`24`	`+ },`
	`25`	`+ methods: {`
	`26`	`+ deleteNinja: function(){`
	`27`	`+ this.ninjas.pop();`
	`28`	`+ }`
`23`	`29`	`}`
`24`	`30`	`}`
`25`	`31`	`</script>`