med-appointments/src/components/Files.vue

<template>
  <div v-if="!files">None found or insufficient permissions...</div>
  <div v-else>
    <p>Files found:</p>
    <div
      v-for="(current, index) in files.keys"
      v-bind:key="index"
      class="message"
    >
      <p class="uppercase">{{ current }}</p>
      <ul>
        <li v-for="(file, index) in files[current]" v-bind:key="index">
          <FileDownload
            v-bind:endpoint="downloadService"
            v-bind:filename="file.filename"
            v-bind:fkey="file.fkey"
            v-bind:id="file.id"
            v-bind:repo="file.repo"
          ></FileDownload>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import FileDownload from "@/components/FileDownload.vue";
import { mapGetters } from "vuex";

export default {
  name: "Files",
  components: {
    FileDownload
  },
  props: ["files"],
  computed: {
    ...mapGetters(["api", "readonly"]),
    downloadService: function() {
      return this.api.download;
    }
  }
};
</script>

<style scoped>
.uppercase {
  text-transform: uppercase;
}
</style>