<template>
  <div class="col vertical-align-child" 
    v-on:dblclick="openFolder"
    id="123">
    <button class="folder">
      <img src="../../assets/images/icons/icon-folder.svg" alt="folder">
      <p class="inline-block">CS3244 Project</p>
    </button>
  </div>
</template>

<script>
  export default {
    data() {
    },
    methods: {
      openFolder() {
        const folderId = this.$el.id;
        this.$router.push({ path: 'content', query: { id: folderId } });
      },
    }
  };
</script>

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

<template>
  <div class="col vertical-align-child" 
    v-on:dblclick="openFolder"
    id="123">
    <button class="folder">
      <img src="../../assets/images/icons/icon-folder.svg" alt="folder">
      <p class="inline-block">{{folderName}}</p>
    </button>
  </div>
</template>

<script>
  export default {
    props: ['folderName'],
    data() {
    },
    methods: {
      openFolder() {
        const folderId = this.$el.id;
        this.$router.push({ path: 'content', query: { id: folderId } });
      },
    }
  };
</script>

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

Load foldername from props passed down from Documents
Load foldername from props passed down from Documents
