Comments.vue

<template>
  <div id="placeholder">
    <div id="comments-container">
      <h4 class="font-weight-bold">Komentar ({{rows}})</h4>
      <b-card
        bg-variant="light"
        class="item"
        v-for="comment in lists"
        :key=comment.id
      >
        <div><small class="font-weight-bold">{{comment.name}}</small></div>
        <b-card-text>{{comment.content}}</b-card-text>
        <div><small class="text-muted font-italic">{{comment.timestamp}}</small></div>
      </b-card>
    </div>
    <div id="comment-box">
      <b-pagination
        v-model="currentPage"
        :total-rows="rows"
        :per-page="perPage"
        align="center"
      />
      <div id="comment-section">
        <b-form-textarea
          id="textarea"
          v-model="text"
          placeholder="Masukkan komentar..."
          no-resize
        />
        <b-button variant="primary">Kirim</b-button>
      </div>
      <div>
        <small class="text-muted font-italic">
          Dengan mengirim komentar, Anda tunduk terhadap UU ITE yang berlaku.
        </small>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Comments',
  components: {

  },
  data() {
    return {
      perPage: 5,
      currentPage: 1,
      text: '',
      items: [
        {
          id: 6,
          userid: 1,
          name: "David Timothy Panjaitan",
          content: "Sama",
          timestamp: "28 Maret 2019, 02.15 WIB"
        },
        {
          id: 5,
          userid: 1,
          name: "Rifo Ahmad Genadi",
          content: "Ngantuk",
          timestamp: "28 Maret 2019, 02.14 WIB"
        },
        {
          id: 4,
          userid: 1,
          name: "Rizky Andyno Ramadhan",
          content: "Tidur tidur",
          timestamp: "28 Maret 2019, 02.14 WIB"
        },
        {
          id: 3,
          userid: 1,
          name: "William Rukmansa",
          content: "Ada apa ini?",
          timestamp: "28 Maret 2019, 00.35 WIB"
        },
        {
          id: 2,
          userid: 1,
          name: "David Timothy Panjaitan",
          content: "Saya masih tidak setuju",
          timestamp: "28 Maret 2019, 00.31 WIB"
        },
        {
          id: 1,
          userid: 1,
          name: "David Timothy Panjaitan",
          content: "Saya tidak setuju",
          timestamp: "28 Maret 2019, 00.28 WIB"
        },
        {
          id: 0,
          userid: 0,
          name: "Ricky Kennedy",
          content: "Bagus ini",
          timestamp: "28 Maret 2019, 00.25 WIB"
        },
      ]
    }
  },
  computed: {
    rows() {
      return this.items.length
    },
    lists() {
      // Return just page of items needed
      return this.items.slice(
        (this.currentPage - 1) * this.perPage,
        this.currentPage * this.perPage
      )
    },
  },
  methods: {

  }
}
</script>


<style lang="scss" scoped>
@import 'src/assets/css/style.scss';

#placeholder {
  width: 100%;
  height: 100%;
  padding: 20px;

  #comments-container {
    height: 60%;
    overflow: auto;

    .item {
      width: 100%;
      margin-bottom: 5px;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
    }
  }

  #comment-box {
    height: 30%;
    margin: 5% 0;

    #comment-section {
      display: flex;
    }
  }
}



</style>