Tengo una serie de elementos, necesito representar esos elementos en un div y adjuntar diferentes funciones al hacer clic en cada uno.
<template> <div class="container"> <div v-for="option in options" :key="option.id" @click="option.clickFunction">. {{option}} </div> </div> </template> <script> export default{ data(){ return{ options: [ { id: 1, text: "option 1", clickFunction: "function1", }, { id: 2, text: "option 2", clickFunction: "function2", }, { id: 3, text: "option 3", clickFunction: "function3", }, { id: 4, text: "option 4", clickFunction: "function4", }, { id: 5, text: "option 5", clickFunction: "function5", }, ], } } methods:{ //defining all click functions } } </script>He intentado el enfoque anterior pero no funciona, ¿hay alguna forma de hacerlo?
Esto no funciona porque cada propiedad clickFunction en cada objeto es una cadena. ¿Qué se supone que debe hacer el atributo @click con una cadena antigua normal? Tratar
<template> <div class="container"> <div v-for="option in options" :key="option.id" @click="option.clickFunction"> <!-- I'm guessing you meant option.text here --> {{option.text}} </div> </div> </template> <script> export default{ data(){ return{ // pass functions around instead of strings! options: [ { id: 1, text: "option 1", clickFunction: this.myUniqueClickHandler, }, { id: 2, text: "option 2", clickFunction: this.myOtherUniqueClickHandler, }, // etc. ], } } methods:{ myUniqueClickHandler() { // ... }, myOtherUniqueClickHandler() { // ... } } } </script>Creo que desea escuchar el clic de cada elemento. Por lo tanto, debe declarar solo un método o función para todos y pasar el valor clave de cada elemento como parámetro. Luego, use una declaración de cambio o una declaración if para detectar en qué opción se hace clic. He cambiado tu código de la siguiente manera:
<template> <div class="container"> <div v-for="option in options" :key="option.id" @click="myFunction(option.id)">. {{option}} </div> </div> </template> <script> export default{ data(){ return{ } } methods:{ myFunction(id) { switch (id) { case 1: // option 1 is clicked break; case 2: // option 2 is clicked break; case 3: // option 3 is clicked break; case 4: // option 4 is clicked break; default: break; } } } } </script>