es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Es posible adjuntar múltiples funciones en V-for?

18 Jul, 2023 Programación

Tengo una matriz de elementos, necesito renderizar esos elementos en un div y adjuntar diferentes funciones de clic a cada uno.


<template>
  <div class="container">

    <div v-for="option in options" :key="option.id" @click="option.clickFunction">
      {{option.text}}
    </div>

  </div>
</template>

<script>
export default{
  data(){
    return{
      options: [
        {
          id: 1,
          text: "opción 1",
          clickFunction: "función1",
        },
        {
          id: 2,
          text: "opción 2",
          clickFunction: "función2",
        },
        {
          id: 3,
          text: "opción 3",
          clickFunction: "función3",
        },
        {
          id: 4,
          text: "opción 4",
          clickFunction: "función4",
        },
        {
          id: 5,
          text: "opción 5",
          clickFunction: "función5",
        },
      ],
    }
  },
  methods:{
    //definiendo todas las funciones de clic
  }
}
</script>

He intentado el enfoque anterior pero no funciona, ¿hay alguna forma de hacer esto?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, hay una forma de hacer esto. En lugar de mantener el nombre de la función en el array de opciones, puedes pasar directamente la referencia de la función como parámetro a la plantilla. Aquí tienes un ejemplo:

    <template>
  <div class="container">
    <div v-for="option in options" :key="option.id" @click="option.clickFunction">{{option.text}}</div>
  </div>
</template>

<script>
export default{
  data(){
    return{
      options: [
        {
          id: 1,
          text: "opción 1",
          clickFunction: this.function1,
        },
        {
          id: 2,
          text: "opción 2",
          clickFunction: this.function2,
        },
        {
          id: 3,
          text: "opción 3",
          clickFunction: this.function3,
        },
        {
          id: 4,
          text: "opción 4",
          clickFunction: this.function4,
        },
        {
          id: 5,
          text: "opción 5",
          clickFunction: this.function5,
        },
      ],
    }
  },
  methods:{
    function1(){
      // código para función1
    },
    function2(){
      // código para función2
    },
    function3(){
      // código para función3
    },
    function4(){
      // código para función4
    },
    function5(){
      // código para función5
    },
  },
}
</script>

    En este ejemplo, la propiedad clickFunction tiene una referencia al método definido en la propiedad methods del componente. Cuando se invoca clickFunction en la plantilla, se llama al método correspondiente.

    Ten en cuenta que las funciones también se pueden definir en línea dentro del array de opciones. Por ejemplo:

    options: [
  {
    id: 1,
    text: "opción 1",
    clickFunction: function() {
      // código para la función de la opción 1
    },
  },
  // ...
]

Comments are closed.