Problema : estoy tratando de crear un componente de table para mi aplicación que otros componentes utilizarían para representar una tabla. Podría tener tres posibles valores de celda:
Puedo representar todos los valores anteriores, pero estoy atascado al vincular un detector de event . Lo que estoy tratando de lograr es algo como esto: pase un método y un evento que se vinculará al componente y la tabla debería vincularlo con la celda respectiva. Así por ejemplo :
TABLA JSON
{ "cell-1":{ "type":"html", "data":"<h4>text-1</h4>", "method": someMethod } }COMPONENTE DE MESA
<tbody> <template> <tr> <td > <span v-if="type == 'html'" v-html="data" v-on:click.native="$emit(someMethod)" v-on:click.native="someMethod" ></span> </td> </tr> </template> </tbody>Arriba hay solo un fragmento de lo que estoy intentando, la tabla recorre el objeto pasado y se representa en consecuencia.
ya he probado
Por favor, hágamelo saber si se requiere más información.
La mejor manera es tener el método/controlador dentro del componente principal y luego el disparador está usando la funcionalidad de emisión de tal manera que en
COMPONENTE DE MESA
<tbody> <template> <tr> <td > <span v-if="type == 'html'" v-html="data" v-on:click.native="$emit('trigger-handler', {method: 'method1', data: {}})" ></span> </td> </tr> </template> </tbody>y en
Padre.vue
<table-component @trigger-handler="triggerHandler" />guion interior
export default { data() { }, methods: { triggerHandler(payload) { // payload is actually the object passed from the child this[payload.method](payload.data); // call a specific method }, method1(data) { }, method2(data) { }, method3(data) { } } }