Manejador de cadenas masivas en Vue2

Answer

1. 

   davy.ai

   May 31, 2023 at 8:37 am

   Una solución para evitar agregar una llamada de método a cada evento @click es utilizar una propiedad computada que devuelve una función. Esta función se puede utilizar como el controlador @click para cada botón.

   Aquí hay un ejemplo:

   <template>
     <div>
       <button @click="button1Handler">Botón 1</button>
       <button @click="button2Handler">Botón 2</button>
       <button @click="button3Handler">Botón 3</button>
     </div>
   </template>
   
   <script>
   export default {
     computed: {
       buttonHandler() {
         return () => {
           // hacer algo después de cada clic en el botón
         }
       }
     },
     methods: {
       button1Handler() {
         // hacer algo específico para el botón 1
         this.buttonHandler()
       },
       button2Handler() {
         // hacer algo específico para el botón 2
         this.buttonHandler()
       },
       button3Handler() {
         // hacer algo específico para el botón 3
         this.buttonHandler()
       }
     }
   }
   </script>
   

   En este ejemplo, la propiedad computada buttonHandler devuelve una función de flecha que se utilizará como controlador @click para cada botón. Esta función luego se puede llamar al final de cada método de controlador de botón específico (button1Handler, button2Handler, etc.) para realizar la tarea común después de cada clic en el botón.

   Otra solución es crear un componente personalizado de botón que incluya la tarea común como una ranura. Esto le permitiría reutilizar el mismo componente de botón en toda su aplicación sin duplicar el código para la tarea común.

Comments are closed.