DocViewer.vue

<template>
  <div>
    <v-card v-if="file" width="800">
      <v-card-title>{{ file.title }}</v-card-title>
      <v-card-subtitle> Besitzer: {{ file.author }} </v-card-subtitle>
      <v-card-text class="contentBox">{{ file.content }}</v-card-text>
      <v-card-actions v-if="editable">
        <v-spacer></v-spacer>
        <v-btn outlined color="primary" @click="$emit('doc-change')"
          >Ändern</v-btn
        >
        <v-btn outlined color="red" @click="deleteConfirmDialogOpened = true"
          >Löschen</v-btn
        >
      </v-card-actions>

      <v-dialog width="400" v-model="deleteConfirmDialogOpened" persistent>
        <v-card>
          <v-card-title>Löschen Bestätigen</v-card-title>
          <v-card-text
            >Sind sie sicher, dass sie das Dokument
            <b>{{ file.title }}</b> unwiederruflich löschen
            möchten?</v-card-text
          >
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn
              outlined
              color="primary"
              @click="deleteConfirmDialogOpened = false"
              >Abbrechen</v-btn
            >
            <v-btn outlined color="red" @click="deleteHandler()">Löschen</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-card>
  </div>
</template>

<script>
/* eslint-disable no-debugger, no-console */
import client from "../../services/Client";

export default {
  name: "DocViewer",
  props: {
    file: Object,
    editable: Boolean
  },
  data: () => ({
    deleteConfirmDialogOpened: false
  }),
  methods: {
    getFile(fileId) {
      let payload = new FormData();
      payload.append("fileId", fileId);
      return client.post(client.URLs.file, payload).then(result => {
        if (result.success) {
          return result.file;
        }
      });
    },
    deleteHandler() {
      this.$emit("doc-delete");
      this.deleteConfirmDialogOpened = false;
    }
  }
};
</script>

<style scoped>
.contentBox {
  white-space: pre-wrap;
}
</style>