In my VUeJS application I have a form to submit some data.
Once a user submits the form it should clear the existing field values.
But now when I submit the form it clears the all the fields except the file upload field.
If I uploaded a file called, dummy.pdf, it will display the dummy.pdf even after a successful submission.
Following is my code for the file upload field,
<div class="mb-1">
<dashboard-input-label
identifier="document"
:settings="{ help: true, helpDirection: 'left' }"
>
Upload document
<template slot="helpText">
Maximum filesize is 5 MB. The default allowed file extensions
are: pdf, jpeg and png.
</template>
</dashboard-input-label>
<validator-v2
:identifier="identifier"
name="document_file"
:rules="{ required: { message: 'Document is required.' } }"
>
<custom-file-upload
ref="documentDocument"
v-model="documentFile"
:max-upload-file-size="5"
name="document_file"
></custom-file-upload>
</validator-v2>
</div>
And my form button is,
<disables-submit-on-errors
:identifier="identifier"
@proceed="storeDocumentAndAddNew"
>
<loading-button ref="submitBtn" size="normal">
Save & Add new
</loading-button>
and under the methods, I have
storeDocumentAndAddNew() {
this.isAddNew = true
const loader = this.$refs.submitBtn
this.storeDocument(loader)
},
reset() {
this.documentName= null
this.dateOfIssue= null
this.expiryDate= null
this.documentNumber = null
this.doesNotHaveDocumentNumber = false
this.doesNotExpire = false
this.documentFile = null
this.doesOptIn = false
this.isAddNew = false
},
This will clear the name field, and the document number fields, but this won't clear the uploaded document's name...
What change I need to do clear all the fields after a successful submission?
To support v-model in components the component must implements a value prop and emit the input event.
It sound like the value prop is missing.
It kinda depends on the implementation of your custom-file-upload component, but here an example:
<template>
<input @input="handleInput" :value="value" />
</template>
<script>
export default {
prop: ['value'],
methods: {
handleInput (e) {
this.$emit('input', e)
}
}
}
</script>