En Vue.js 2, me gustaría convertir una cadena en una llamada de función para que pueda configurarse como un controlador de eventos. Creo que esto sería muy práctico, especialmente cuando se crean dinámicamente muchos elementos (por ejemplo, botones) basados en una lista de objetos.
new Vue({ el: "#app", data: { myArray: [ { value: 1, fn: "firstMethod" }, { value: 2, fn: "secondMethod" }, ], }, methods: { firstMethod() { console.log("'firstMethod' was executed."); }, secondMethod() { console.log("'secondMethod' was executed."); }, }, }); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app"> <template v-for="elem in myArray"> <button @click="elem.fn"> <!-- Here is where I am stucked. --> <!-- <button> --> {{elem.value}} </button> </template> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script src="script.js"></script> </body> </html> Mi primer intento de hacer esto fue establecer las propiedades fn en myArray como una especie de punteros a las funciones correspondientes con this (por ejemplo, fn: this.firstMethod ). El problema es, creo, que en el momento de la definición, estas funciones aún se desconocen, ya que obtengo: [Vue warn]: Invalid handler for event "click": got undefined .
¿Es posible lo que estoy tratando de lograr? ¿Hay algún inconveniente con esta estrategia que estoy pasando por alto?
Intente crear un método, que funcionará con todos los botones.
new Vue({ el: "#app", data: { myArray: [ { value: 1, fn: "firstMethod" }, { value: 2, fn: "secondMethod" }, ], }, methods: { basicMethod(name) { console.log(`'${name}' was executed.`); if(name === 'firstMethod') { //some logic, and so on for other methods if u need } }, }, }); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app"> <template v-for="elem in myArray"> <button @click="basicMethod(elem.fn)"> <!-- Here is where I am stucked. --> <!-- <button> --> {{elem.value}} </button> </template> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script src="script.js"></script> </body> </html>Puede usar un método genérico provisto con el nombre de la función para llamar a this[ fn ](); .
Pero por razones de seguridad, es posible que desee que estos métodos personalizados estén en un objeto, no solo en el principal this , por lo que no se pueden llamar a otros métodos.
Además, desea verificar si el método existe antes de llamarlo.
Se vería algo como esto:
new Vue({ el: "#app", data: { myArray: [ { value: 1, fn: "firstMethod" }, { value: 2, fn: "secondMethod" }, { value: 3, fn: "nonExistingMethod" }, // Won't throw an error { value: 4, fn: "someImportantSecureMethod" }, // Won't be called ], customMethods: { firstMethod: function() { console.log("'firstMethod' was executed."); }, secondMethod: function() { console.log("'secondMethod' was executed."); }, }, }, methods: { callCustomMethod(fn) { // Make sure it exists if (typeof this.customMethods[fn] === "function") { // Only methods inside the customMethods object are available this.customMethods[fn](); } }, someImportantSecureMethod() { console.log('The method may not be exposed to dynamic calling!'); }, }, }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <template v-for="elem in myArray"> <button @click="callCustomMethod(elem.fn)"> <!-- <button> --> {{elem.value}} </button> </template> </div> Como nota al margen: también podría considerar usar eventos personalizados ( ver documentos ) para esto. Usar $emit('custom-event-name') como el controlador v-on:click y tener sus métodos personalizados como detectores de eventos. (Hace que sea más fácil cuando más tarde desee convertir los artículos en componentes separados).