Uso vue js y muestro un gráfico con chartjs. Cuando hago clic en el gráfico, quiero emitir un evento para obtener datos en el componente principal. Mi función onClick funciona pero no el evento. ¿Tienes una idea de mi problema? Componente Line2.vue
<script> import { mixins, Line } from "vue-chartjs"; const { reactiveProp } = mixins; export default { extends: Line, mixins: [reactiveProp], props: ["options"], mounted() { const self = this; console.log(self); this.options.onClick = function (e, tooltipItems) { console.log(tooltipItems[0].__ob__); //.logged self.$emit("sendIndex", tooltipItems[0]._index); }; this.renderChart(this.chartData, this.options); }, }; </script> <style scoped></style>mi componente principal
... <h1 v-on:sendIndex="getIndexCoord($event)">{{ indexCoord }}</h1> ... methods: { getIndexCoord: function (e) { console.log("rrr", e); //Not logged this.indexCoord = e; }, }Saludos
1. Primero, crea el archivo EventBus.js para importar Vue desde 'vue';
export const EventBus = new Vue();2.En su código de archivo char.js como a continuación
import { EventBus } from "../EventBus.js"; import { mixins, Line } from "vue-chartjs"; const { reactiveProp } = mixins; export default { extends: Line, mixins: [reactiveProp], props: ["options"], mounted() { const self = this; console.log(self); this.options.onClick = function (e, tooltipItems) { console.log(tooltipItems[0].__ob__); //.logged EventBus.$emit("sendIndex", tooltipItems[0]._index); }; this.renderChart(this.chartData, this.options); }, };donde desea acceder a sus datos en ese archivo como a continuación
import { EventBus } from "../EventBus.js"; mounted() { EventBus.$on('sendIndex', data => { console.log(data) }); },