dmtrbrl / vue-trend-chart

Simple trend charts for Vue.js
https://dmtrbrl.github.io/vue-trend-chart/
MIT License
261 stars 29 forks source link

on:mouseMove not working #7

Closed jacobzed closed 4 years ago

jacobzed commented 4 years ago

Hi there,

I'm not sure what if I'm doing something wrong (because your codepen samples don't have this problem) or if this is a bug, but on:mouseMove event isn't being called.

I suspect it's because of this: https://vuejs.org/v2/guide/components-custom-events.html#Event-Names

Additionally, v-on event listeners inside DOM templates will be automatically transformed to lowercase (due to HTML’s case-insensitivity), so v-on:myEvent would become v-on:myevent – making myEvent impossible to listen to.

Vue js hints in console (using non minified version of vue.js) seem to confirm this:

[Vue tip]: Event "mousemove" is emitted in component but the handler is registered for "mouseMove". Note that HTML attributes are case-insensitive and you cannot use v-on to listen to camelCase events when using in-DOM templates. You should probably use "mouse-move" instead of "mouseMove".

The fix for me seems to be change this

        this.$emit(
          "mouseMove",  ////// this should be lowercase to "mousemove"
          this.activeLineParams ? Object.assign({}, this.activeLineParams, {data: data}) : null
        );