added lesson 22 code

iamshaunjp · iamshaunjp · commit e9e1bc783a3c · 2017-03-31T15:00:57.000+01:00
diff --git a/src/App.vue b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <app-header></app-header>
-        <app-ninjas></app-ninjas>
+        <app-ninjas v-bind:ninjas="ninjas"></app-ninjas>
         <app-footer></app-footer>
     </div>
 </template>
@@ -20,7 +20,14 @@ 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}
+          ]
         }
     }
 }
diff --git a/src/components/Ninjas.vue b/src/components/Ninjas.vue
@@ -10,16 +10,15 @@
 </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}
-            ]
+
         }
     }
 }
