handle events

jshawl · Feb 1, 2017 · 022a9fc664729f8fb91582e10576ebe129c77b5d · 022a9fc
1 parent 4a6e34a
commit 022a9fc664729f8fb91582e10576ebe129c77b5d
Unified Split

Showing with 14 additions and 4 deletions.

+14 −4 index.html
diff --git a/index.html b/index.html
@@ -9,9 +9,14 @@
    </div>
    <script type='x-template' id='tree'>
      <div>
-  
-        <div v-for="file in files">
-  
-          {{file.name}}<span v-if="file.tag == 'folder'">/</span>
-  
-        </div>
+  
+	<div v-for="file in files">
+  
+	  <div v-if="file.tag == 'folder'" v-on:click='toggleExpand()'>
+  
+	    {{file.name}}/
+  
+	  </div>
+  
+	  <div v-else>
+  
+	    {{file.name}}
+  
+	  </div>
+  
+	</div>
      </div>
    </script>
    <script>
@@ -22,6 +27,11 @@
      ]
      Vue.component('tree',{
        template: '#tree',
+  
+        methods: {
+  
+          toggleExpand: function(){
+  
+            console.log('togglin!')
+  
+          }
+  
+        },
        data(){
          return {
            files
@@ -33,4 +43,4 @@
      })
    </script>
  </body>
-  
-</html>
+  
+</html>