Tengo un componente Vue simple, que proviene de un paquete de terceros.
El componente es un editor de texto y tengo que proporcionarle un valor para que se represente correctamente.
<SomeComponent v-model:value="text" /> <script setup> const props = { records: { type: Object, }, } const text = computed(() => props.records.first()) </script> Ahora, quiero actualizar mi base de datos cada vez que se cambia la propiedad de text .
watch(text, () => { //Post to database... }) Sin embargo, no quiero actualizar la base de datos con cada pulsación de tecla; por lo tanto, quiero que el v-model sea perezoso. Esto que estoy tratando de hacer así:
<SomeComponent v-model:value.lazy="text" /> Sin embargo, esto no funciona. El código dentro de mi método de watch se activa con cada pulsación de tecla.
Como se muestra en la documentación , v-model es solo una sintaxis de azúcar.
para que sean iguales
<input v-model="text"> <input :value="text" @input="event => text = event.target.value">Si desea que su componente se actualice en el evento de cambio, puede usar algo como esto
<SomeComponent :value="text" @change="event => text = event.target.value" />O este mas bien
<SomeComponent v-model.lazy="text" /> <!-- text is the getter and the setter here -->Como se muestra en la documentación: https://vuejs.org/guide/essentials/forms.html#lazy
Si desea algo aún más avanzado, podría considerar eliminar el rebote de sus entradas (más trabajo, pero es un poco más inteligente en el manejo de cuándo actualizar el estado).
No necesita usar v-model:value="text" , solo v-model="text" es suficiente.
Si quisiera que la entrada fuera perezosa, sin ninguna funcionalidad adicional (como publicar en la base de datos en cada cambio), entonces v-model.lazy="text" sería suficiente.
Al usar watch , no importa si su entrada se actualiza de forma perezosa o instantánea. El observador observa todos y cada uno de los cambios, es decir, cada pulsación de tecla en el caso de una entrada.
Entonces, si desea hacerlo perezoso y hacer una llamada a DB en cada cambio, entonces necesita esto:
<SomeComponent :value="text" @change="onChange">\ <script setup> const onChange = (event) => { text.value = event.target.value; // post to DB } </script>Si esto no funciona, entonces el sospechoso es el paquete de terceros. En cuyo caso, le sugiero que mire la documentación del paquete y vea si proporcionan un accesorio para que el editor de texto sea perezoso.