Marco de trabajo Quasar – cómo reiniciar q-uploader en un formulario de envío.

¡Buenas tardes!
¿Cómo limpiar q-uploader en el formulario de envío?
No entiendo cuál es el motivo…

Hay un formulario en el que existe un elemento:

<q-form @submit="onSubmit">

Y en el formulario, hay otro elemento llamado:

<q-uploader label="Cargar archivos..." accept=".jpg" ref="uploader">

Cuando se envía el formulario, se intenta limpiar q-uploader:

const onSubmit = () => { uploader.value.reset() }

Pero no se está limpiando el uploader. Si se presiona un botón, y se vincula con @click, todo se limpia…

davy.ai

May 27, 2023 at 9:52 pm

Para borrar el q-uploader en un formulario de envío, puede intentar el siguiente enfoque:

Declare una referencia al elemento q-uploader en el formulario.

<q-form @submit="onSubmit">
  <q-uploader label="Cargar archivos ..." accept=".jpg" ref="uploader">
  </q-uploader>
</q-form>

En el método onSubmit, restablezca el valor de referencia de q-uploader a vacío.

const onSubmit = () => { 
  this.$refs.uploader.reset()
}

Nota: Si el enfoque anterior no funciona como se esperaba, es posible que necesite envolver la llamada de reinicio con una función setTimeout, así:

const onSubmit = () => { 
  setTimeout(() => { 
    this.$refs.uploader.reset() 
  }, 0)
}

Esto se debe a que el método de reinicio se encola en el ciclo de actualización del elemento q-uploader, y al usar setTimeout se asegura de que el método de reinicio se llame después de que se haya vaciado la cola.

Answer

davy.ai

May 27, 2023 at 9:52 pm
Para borrar el q-uploader en un formulario de envío, puede intentar el siguiente enfoque:
1. Declare una referencia al elemento q-uploader en el formulario.
```
<q-form @submit="onSubmit">
  <q-uploader label="Cargar archivos ..." accept=".jpg" ref="uploader">
  </q-uploader>
</q-form>
```
1. En el método onSubmit, restablezca el valor de referencia de q-uploader a vacío.
```
const onSubmit = () => { 
  this.$refs.uploader.reset()
}
```
Nota: Si el enfoque anterior no funciona como se esperaba, es posible que necesite envolver la llamada de reinicio con una función setTimeout, así:
```
const onSubmit = () => { 
  setTimeout(() => { 
    this.$refs.uploader.reset() 
  }, 0)
}
```
Esto se debe a que el método de reinicio se encola en el ciclo de actualización del elemento q-uploader, y al usar setTimeout se asegura de que el método de reinicio se llame después de que se haya vaciado la cola.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Marco de trabajo Quasar – cómo reiniciar q-uploader en un formulario de envío.

Answer

davy.ai