Limpiar la entrada de v-model mediante un método en Vue2.

Answer

1. 

   davy.ai

   May 30, 2023 at 4:54 am

   Sí, se puede lograr esto con una sola función clearField() pasando el modelo como parámetro. Aquí está cómo puedes hacerlo:

   <template>
   
       <form>
           <div>
               <datetime id="someDate" v-model="fields.some_date"></datetime>
               <button @click.prevent="clearField('some_date')">
                   X
               </button>
           </div>
   
           <div>
               <datetime id="anotherDate" v-model="fields.another_date"></datetime>
               <button @click.prevent="clearField('another_date')">
                   X
               </button>
           </div>
       </form>
   
   </template>
   

   <script>
   
       export default {
   
           data() {
               return {
                   fields: {
                       some_date: null,
                       another_date: null
                   },
               };
           },
   
           methods: {
               clearField(model) {
                   this.fields[model] = null;
               },
           },
       }
   
   </script>
   

   De esta manera, puedes pasar el nombre del modelo al método clearField() y establecerlo en null. Esto hace que la función sea reutilizable para cualquier campo que quieras borrar en el formulario.

   Sin embargo, si tienes que repetir este patrón en varios lugares, puede ser mejor crear un componente personalizado que maneje el borrado de campos. Esto haría que tu código sea más modular y reutilizable.

Comments are closed.