En mi aplicación VUeJS tengo un formulario para enviar algunos datos.
Una vez que un usuario envía el formulario, debe borrar los valores de campo existentes.
Pero ahora, cuando envío el formulario, borra todos los campos excepto el campo de carga de archivos.
Si cargué un archivo llamado dummy.pdf, mostrará el dummy.pdf incluso después de un envío exitoso.
El siguiente es mi código para el campo de carga de archivos,
<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>Y mi botón de formulario es,
<disables-submit-on-errors :identifier="identifier" @proceed="storeDocumentAndAddNew" > <loading-button ref="submitBtn" size="normal"> Save & Add new </loading-button>y bajo los métodos, tengo
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 },Esto borrará el campo de nombre y los campos de número de documento, pero esto no borrará el nombre del documento cargado...
¿Qué cambio necesito para borrar todos los campos después de un envío exitoso?
Para admitir el modelo v en los componentes, el componente debe implementar una propiedad de value y emitir el evento de input .
Parece que falta el apoyo de value .
Depende un poco de la implementación de su componente custom-file-upload , pero aquí hay un ejemplo:
<template> <input @input="handleInput" :value="value" /> </template> <script> export default { prop: ['value'], methods: { handleInput (e) { this.$emit('input', e) } } } </script>