如何使用 vue-chartjs 发出事件?
How to emit an event with vue-chartjs?
我使用 vue js 并使用 chartjs 显示图表。当我单击图表时,我想发出一个事件以获取父组件中的数据。我的 onClick 函数有效但事件无效。
你知道我的问题吗?
组件 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>
我的主要组成部分
...
<h1 v-on:sendIndex="getIndexCoord($event)">{{ indexCoord }}</h1>
...
methods: {
getIndexCoord: function (e) {
console.log("rrr", e); //Not logged
this.indexCoord = e;
},
}
此致
1.first 你创建了 EventBus.js 文件
从 'vue';
导入 Vue
export const EventBus = new Vue();
2.In 您的 char.js 文件代码如下
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);
},
};
您想要访问该文件中的数据的位置,如下所示
import { EventBus } from "../EventBus.js";
mounted() {
EventBus.$on('sendIndex', data => {
console.log(data)
});
},
我使用 vue js 并使用 chartjs 显示图表。当我单击图表时,我想发出一个事件以获取父组件中的数据。我的 onClick 函数有效但事件无效。 你知道我的问题吗? 组件 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>
我的主要组成部分
...
<h1 v-on:sendIndex="getIndexCoord($event)">{{ indexCoord }}</h1>
...
methods: {
getIndexCoord: function (e) {
console.log("rrr", e); //Not logged
this.indexCoord = e;
},
}
此致
1.first 你创建了 EventBus.js 文件 从 'vue';
导入 Vueexport const EventBus = new Vue();
2.In 您的 char.js 文件代码如下
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);
},
};
您想要访问该文件中的数据的位置,如下所示
import { EventBus } from "../EventBus.js"; mounted() { EventBus.$on('sendIndex', data => { console.log(data) }); },