~koehr/koehr.tech

28dd7e8275d3a45e73c3842f17204139e703ff70 — koehr 5 years ago 1dbd3ce
simple comment viewer
M public/testdata/articles/hello-world-and-such/comments.json => public/testdata/articles/hello-world-and-such/comments.json +31 -1
@@ 11,6 11,36 @@
    "createdAt": 1545081548000,
    "body": "Because I'm cool I comment my own stuff.",
    "favorited": true,
    "favoritesCount": 1
    "favoritesCount": 1,
    "comments": [
      {
        "author": {
          "id": "anonymous",
          "username": "Anon Ymous",
          "bio": "I don't dare to show my face.",
          "image": "https://static.productionready.io/images/smiley-cyrus.jpg",
          "following": false,
          "follows": false
        },
        "createdAt": 1545081549000,
        "body": "Are you serious? This is the stupidest thing I've ever seen!!1eleven",
        "favorited": false,
        "favoritesCount": 0
      },
      {
        "author": {
          "id": "anonymous",
          "username": "Anon Ymous",
          "bio": "I don't dare to show my face.",
          "image": "https://static.productionready.io/images/smiley-cyrus.jpg",
          "following": false,
          "follows": false
        },
        "createdAt": 1545081549600,
        "body": "Because I'm cool I laugh my ass off.",
        "favorited": false,
        "favoritesCount": 0
      }
    ]
  }
]

A src/components/Article/comments.vue => src/components/Article/comments.vue +36 -0
@@ 0,0 1,36 @@
<template>
  <section class="comments">
    <article v-for="(comment, i) in comments" :key="`${idPrefix}${i}`" :id="`${idPrefix}${i}`" class="comment">
      <overview v-bind="comment" :title="comment.body" />
      <article-view-comments v-if="comment.comments" :parent-id="`${idPrefix}${i}`" :comments="comment.comments" />
    </article>
  </section>
</template>

<script>
import Overview from './overview'

export default {
  name: 'article-view-comments',
  components: { Overview },
  props: {
    parentId: String,
    comments: Array
  },
  computed: {
    idPrefix () {
      return `${this.parentId}--comment-`
    }
  }
}
</script>

<style>
section.comments h2 {
  font-size: 1.2em;
  font-weight: normal;
}
section.comments section.comments {
  padding-left: 2em;
}
</style>

M src/components/Article/view.vue => src/components/Article/view.vue +11 -5
@@ 1,20 1,26 @@
<template>
  <article :id="`view--${$route.params.slug}`">
    <mark-down :text="body" />
    <hr />
    <comments :parent-id="id" :comments="comments" />
  </article>
</template>

<script>
import MarkDown from '@/components/MarkDown'
import Comments from './comments'
import { createNamespacedHelpers } from 'vuex'
const { mapState } = createNamespacedHelpers('Article')

export default {
  name: 'article-view-content',
  components: { MarkDown },
  computed: mapState(['body'])
  components: { MarkDown, Comments },
  computed: {
    ...mapState(['body', 'comments']),
    id () {
      const slug = this.$route.params.slug
      return `view--${slug}`
    }
  }
}
</script>

<style scoped>
</style>