¿Hay alguna forma de pasar datos adicionales a los controladores de eventos cuando se usa la sintaxis de la estructura del objeto?
Ejemplo:
MySFC.vue:
<template> <template v-for="action in actions" : key="action.id"> <button v-on="action.eventHandlers"> <!--Looking for some way to pass both event and additional data here--> {{ action.name }} </button> </template> </template> <script> import { actions } from '@/lib/my-actions.js'; export default { setup(props, ctx){ return{ actions, } }, } </script>mis-acciones.js:
export const actions = { name: 'my action', eventHandlers: { click: (event, myData) => { console.log(myData); }, mousedown: (event, myData) => { console.log(myData); } } }Normalmente, si tiene un evento específico que está tratando de manejar, puede hacer algo como:
<button @click="myClickHandler($event, myData)"> </button>Pero en este caso, estoy tratando de crear una especie de contenedor para complementos y no sé qué eventos deben manejarse, por lo que no puedo predefinir con v-on qué eventos buscar.
Vi algunas opciones para adjuntar eventos dinámicos, pero solo veo ejemplos en los que se pasa el evento en sí, no con parámetros adicionales.
Podría usar Function.prototype.bind() para vincular los argumentos iniciales de la función. Esto solo se puede hacer con funciones regulares (no funciones de flecha).
// @/lib/my-actions.js const myClickData = { id: 'my click data', } const myMouseDownData = { id: 'my mousedown data', } export const actions = [ { name: 'my action', eventHandlers: { click: function (myData, event) { console.log('click', { event, myData }) }.bind(undefined, myClickData), mousedown: function (myData, event) { console.log('mousedown', { event, myData }) }.bind(undefined, myMouseDownData), }, }, ]