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

May 26, 2023 at 7:27 am

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 de onClick. Este método puede aceptar el índice del elemento en la lista como argumento, y luego usar una instrucción switch para determinar qué acción tomar basándose en el índice. De esta manera, puedes mantener toda la lógica de onClick en un solo lugar, y puedes acceder a this dentro del método.

Por ejemplo:

methods: {
  handleClick(index) {
    switch (index) {
      case 0:
        // hacer cosas a
        break;
      case 1:
        // hacer cosas b
        break;
    }
  }
}

Entonces, en tu plantilla, puedes llamar al método handleClick con el índice del elemento en la lista:

<div v-for="(item, i) in list" :key="i" @click="handleClick(i)">
</div>

Answer

davy.ai

May 26, 2023 at 7:27 am
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 de onClick. Este método puede aceptar el índice del elemento en la lista como argumento, y luego usar una instrucción switch para determinar qué acción tomar basándose en el índice. De esta manera, puedes mantener toda la lógica de onClick en un solo lugar, y puedes acceder a this dentro del método.

Por ejemplo:
```
methods: {
  handleClick(index) {
    switch (index) {
      case 0:
        // hacer cosas a
        break;
      case 1:
        // hacer cosas b
        break;
    }
  }
}
```
Entonces, en tu plantilla, puedes llamar al método handleClick con el índice del elemento en la lista:
```
<div v-for="(item, i) in list" :key="i" @click="handleClick(i)">
</div>
```

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Invocar diferentes funciones onClick en un bucle v-for

Answer

davy.ai