Detail.vue

<template>
  <div class="detail-section">
    <h1 class="detail-title">{{ detail.title }}</h1>
    <div class="detail-content">
      <wmui-preview :content="detail.content" />
    </div>
    <p class="detail-tags">
      <nuxt-link v-for="(tag, index) in detail.tags" :key="index" :to="'/tags/' + tag.id"># {{ tag.name }}</nuxt-link>
    </p>
    <div class="detail-admin-section">
      <p>Created at {{ detail.created_at | formatDate('yyyy-MM-dd') }}</p>
      <p>Updated at {{ detail.updated_at | formatDate('yyyy-MM-dd') }}</p>
      <p>Total Views {{ detail.views }}</p>
      <p class="edit" v-if="isAdmin"><a @click="edit(detail.id)">Edit</a></p>
      <p class="delete" v-if="isAdmin"><a @click="del(detail.id)">Delete</a></p>
    </div>
    <blog-comment 
      :comment-list="detail.comments" 
      :article-id="detail.id" />
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { cutString } from '~/plugins/filters'
export default {
  fetch({ store, route }) {
    let id = route.params.id || ''
    return store.dispatch('ARTICLE_DETAIL', route.params.id || '')
  },
  head() {
    return {
      title: `${this.detail.title} - ${this.user.nickname}`,
      meta: [
        { description: cutString(this.detail.content, 300) }
      ]
    }
  },
  computed: {
    ...mapState([
      'user',
      'isAdmin',
      'detail',
      'app',
    ]),
  },
  methods: {
    del(id) {
      let _self = this
      this.$Modal.confirm({
        title: 'Are you sure?',
        onConfirm(instance) {
          _self.$store.dispatch('DELETE_ARTICLE', id).then(data => {
            if (data.success) {
              _self.$router.go(-1)
            }
          })
          instance.open = false
        },
        onCancel(instance) {
          instance.open = false
        }
      })
    },
    edit(id) {
      this.$router.push(`/admin/posts/${id}`)
    }
  }
}
</script>