add comment collapse

src/components/Comment.vue

@@ -3,9 +3,14 @@
     <div class="by">
       <router-link :to="'/user/' + comment.by">{{ comment.by }}</router-link>
       {{ comment.time | timeAgo }} ago
+      <span v-if="comment.kids && comment.kids.length">
+        | <a class="expand" @click="open = !open">
+          {{ (open ? 'collapse ' : 'expand ') + pluralize(comment.kids.length) }}
+        </a>
+      </span>
     </div>
     <div class="text" v-html="comment.text"></div>
-    <ul class="comment-children">
+    <ul class="comment-children" v-show="open">
       <comment v-for="id in comment.kids" :id="id"></comment>
     </ul>
   </li>
@@ -15,6 +20,11 @@
 export default {
   name: 'comment',
   props: ['id'],
+  data () {
+    return {
+      open: true
+    }
+  },
   computed: {
     comment () {
       return this.$store.state.items[this.id]
@@ -24,6 +34,11 @@ export default {
     this.$store.dispatch('FETCH_ITEMS', {
       ids: [this.id]
     })
+  },
+  methods: {
+    pluralize (n) {
+      return n + (n === 1 ? ' reply' : ' replies')
+    }
   }
 }
 </script>
@@ -35,6 +50,9 @@ export default {
 
 .comment
   border-top 1px solid #eee
+  position relative
+  .expand
+    cursor pointer
   .by, .text
     font-size .9em
     padding 1em 0