Invocar diferentes funciones onClick en un bucle v-for
Tengo un conjunto de datos que necesita ser recorrido en un loop, pero cada elemento en esos datos tiene un evento onClick diferente. Algo así como:
lista: [
{
texto: ‘a’,
icono: ‘a-icon’,
onClick: () => {
// hacer cosas a
},
},
{
texto: ‘b
‘,
icono: ‘b-icon’,
onClick: () => {
// hacer cosas b
},
},
]
Al principio intenté hacer esto:
pero no funcionó. El error fue:
TypeError: item.onClick no es una función
Luego intenté esto:
lo cual se ve extraño pero funciona. Solo que no puedo acceder a “this” dentro de la función onClick. Podría pasar “this” directamente a la función como @click=”list[i].onClick(this)” pero también se ve extraño.
Sé que puedo escribir un método y hacer un “switch” según el índice. Pero entonces tendría que escribir la función onClick por separado.
¿Hay una mejor manera de hacer esto?
davy.ai
Sí, hay una mejor manera de hacer esto. Puedes usar la propiedad
methods
de la instancia de Vue para definir un solo método que manejará todos los diferentes eventos deonClick
. Este método puede aceptar el índice del elemento en la lista como argumento, y luego usar una instrucciónswitch
para determinar qué acción tomar basándose en el índice. De esta manera, puedes mantener toda la lógica deonClick
en un solo lugar, y puedes acceder athis
dentro del método.Por ejemplo:
Entonces, en tu plantilla, puedes llamar al método
handleClick
con el índice del elemento en la lista: