Mejor forma de limpiar valores en inputs dependientes


#1

Buenas, tengo un componente switch que al activarlo permite el ingreso de valores en un input.
Ahora, al momento de volver a “desactivar” el switch, como seria la forma “mas prolija” de volver a borrar el valor del input?

Debería hacer algo como:

watch: {
    my_switch: () => {
       this.my_input = null
   }
} 

Que pasa si necesito limpiar varios inputs mas? Debería seguir sumandolos al watch?
Debería lanzar un evento custom en el switch y que todos los inputs estén escuchando?

Saludos!


#2

Hola!

Siempre plantealo de modo tal que los componentes se puedan reusar en distintos contextos. Segun ello el component Swtich podria emitir algun evento especifico segun su estado (o alternativamente podrias escuchar el evento update y hacer algo segun el valor del mismo, pero los eventos resultan mas especificos y faciles de entender).

En cuanto a los inputs, crea una función resetForm que se encargue de todos los valores de los inputs. Los inputs en sí, tan solo reaccionan a los cambios del valor.

El codigo podria lucir algo como:

<template>
  <div>
    <my-switch @toggle-off="resetForm"/>
    <input v-model="input1"/>
    <input v-model="input2"/>
  </div>
</template>

<script>
...
  methods: {
    resetForm () {
      this.input1 = ''
      this.input2 = ''
      ...
    }
  }
</script>

#3

Excelente. muchas gracias!