lesson 12 code

Shaun Pelling · Shaun Pelling · commit cda1fe7f0845 · 2017-03-30T09:46:52.000+01:00
diff --git a/app.js b/app.js
@@ -1,8 +1,12 @@
 new Vue({
     el: '#vue-app',
     data: {
-        error: false,
-        success: false
+        characters: ['Mario', 'Luigi', 'Yoshi', 'Bowser'],
+        ninjas: [
+            { name: 'Ryu', age: 25 },
+            { name: 'Yoshi', age: 35 },
+            { name: 'Ken', age: 55 }
+        ]
     },
     methods: {
 
diff --git a/index.html b/index.html
@@ -8,13 +8,17 @@
     </head>
     <body>
         <div id="vue-app">
-            <h1>Conditionals</h1>
-            <button v-on:click="error = !error">Toggle error</button>
-            <button v-on:click="success = !success">Toggle success</button>
-            <!--  <p v-if="error" class="error">There has been an error</p>
-            <p v-if="success" class="success">Whooo, success :)</p> -->
-            <p v-show="error" class="error">There has been an error</p>
-            <p v-show="success" class="success">Whooo, success :)</p>
+            <h1>Looping through lists</h1>
+            <ul>
+                <li v-for="character in characters">{{ character }}</li>
+            </ul>
+            <ul>
+                <li v-for="(ninja, index) in ninjas">{{ index }} . {{ ninja.name }} - {{ ninja.age }}</li>
+            </ul>
+            <template v-for="(ninja, index) in ninjas">
+                <h3>{{ index }} . {{ ninja.name }}</h3>
+                <p>Age - {{ ninja.age }}</p>
+            </template>
         </div>
     </body>
 
