MusareFork/frontend/components/Modals/IssuesModal.vue

<template>
  <modal title="Report">
    <div slot="body">
      <article class="message">
        <div class="message-body">
          <strong>Song ID:</strong>
          {{ $parent.editing.songId }}
          <br />
          <strong>Created By:</strong>
          {{ $parent.editing.createdBy }}
          <br />
          <strong>Created At:</strong>
          {{ $parent.editing.createdAt }}
          <br />
          <span v-if="$parent.editing.description">
            <strong>Description:</strong>
            {{ $parent.editing.description }}
          </span>
        </div>
      </article>
      <table class="table is-narrow" v-if="$parent.editing.issues.length > 0">
        <thead>
          <tr>
            <td>Issue</td>
            <td>Reasons</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(issue, index) in $parent.editing.issues" :key="index">
            <td>
              <span>{{ issue.name }}</span>
            </td>
            <td>
              <span>{{ issue.reasons }}</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div slot="footer">
      <a class="button is-primary" v-on:click="$parent.resolve($parent.editing._id)" href="#">
        <span>Resolve</span>
      </a>
      <a class="button is-danger" v-on:click="$parent.toggleModal()" href="#">
        <span>Cancel</span>
      </a>
    </div>
  </modal>
</template>

<script>
import Modal from "./Modal.vue";

export default {
  components: { Modal },
  events: {
    closeModal: function() {
      this.$parent.modals.report = false;
    }
  }
};
</script>