[Vuejs]-<b-form-file> does not keep the filename visible when switched to other components

by

0👍

well I was using tab view to display <b-form-file> and encountered the same behavior. As I was not using <router-view> so the <keep-alive> solution did not worked for me. I found a nice little trick by dynamically setting the placeholder prop of the <b-form-file> component to display the filename. The following code is pretty self-explanatory I think.

<template>
<b-form-file
  v-model="file"
  id="file"
  :placeholder="fileName"
  drop-placeholder="Drop file here..."
  accept=".xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
/>
</template>

<script>
import {
  BFormFile,
} from "bootstrap-vue";

export default {
  components: {
    BFormFile,
  },
  data() {
    return {
      file: null,
      fileName: "Choose a .xlsx file or drop it here...",
    };
  },
  watch: {
    file(newVal, _) {
      this.fileName = newVal.name;
    },
  },
};
</script>

Leave a comment