I've build a file input with BootstrapVue. I'm saving the v-model in a vuex state. Checking the values via the devtools the values seems to be saved just fine.
The problem is that input is inside a multistep form, where each step is a dynamic component. If I switch to another step and then return to the one containing this input, it shown as no file have been uploaded.
Unfortunately, I can't use keep-alive as solution, as the form is validated with vee-validate:as noted this related issue deactivated are still validated. So, for example, if I insert invalid data on step 3 and then return back on step 2, I can't proceed anymore on step 3 because of that invalid data.
Any idea on what I'm doing wrong? As final note I'd add that I've used the same logic for other kind of field (textfield, radiofield) and those just work fine.
<template>
<b-form-group>
<b-form-file
v-model="fileValue"
ref="file-input"
placeholder="Seleziona i file"
drop-placeholder="Drop file here..."
:multiple="multiple ? true : false"
accept=".jpg,.jpeg,.gif,.png,.pdf"
/>
<b-button
@click="clearFiles"
:disabled="Object.keys(fileValue).length === 0"
>Rimuovi i file
</b-button>
</b-form-group>
</template>
<script>
export default {
components: {},
props: {
multiple: {
type: Boolean,
default: true
},
getterName: {
type: String,
required: true
},
setterName: {
type: String,
required: true
}
},
computed: {
fileValue: {
get() {
return this.$store.getters["form/files"];
},
set(value) {
this.$store.dispatch(this.setterName, value);
}
}
},
methods: {
clearFiles() {
const emptyValue = this.multiple ? [] : "";
this.$store.dispatch(this.setterName, emptyValue);
}
}
};
</script>