Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

120
Visualizações
Vue 3 Pasar datos adicionales como un parámetro con eventos dinámicos de sintaxis de objeto

¿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.

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

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), }, }, ]

manifestación

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda