Native listener on VueEcharts Component does not work in Vue 3

[kingyue737]

Confirmation

• [X] I can confirm this problem is not reproducible with ECharts itself.

How are you introducing Vue-ECharts into your project?

ES Module imports

Versions

+-- @vitejs/plugin-vue@5.0.4
| `-- vue@3.4.19 deduped
+-- echarts@5.5.0
+-- vue-echarts@6.6.9
| +-- echarts@5.5.0 deduped
| +-- vue-demi@0.13.11
| | `-- vue@3.4.19 deduped
| `-- vue@3.4.19 deduped
`-- vue@3.4.19
  `-- @vue/server-renderer@3.4.19
    `-- vue@3.4.19 deduped

Details

In Vue 3, native event listener like on:mouseenter does not work on v-chart. When mouse enters the chart, nothing happens.

<v-chart @mouseenter="testFn" />

No such issue in Vue 2. The following works in Vue v2.7:

<v-chart @mouseenter.native="testFn" />

Reproduction

https://stackblitz.com/edit/vitejs-vite-kxigen

[Justineo]

This is the expected behavior in Vue 3.

See https://v3-migration.vuejs.org/breaking-changes/v-on-native-modifier-removed.html

[kingyue737]

@Justineo Not an expected behavior. In Vue 3, we do not need .native modifier and the listener will automatically become a native event listener if this event is not defined in component

Here in Vue-Echarts, the listener just does not work, instead of falling back to an effective native event listener

[kingyue737]

Ah I see, inheritAttrs: false is set in Vue ECharts. Why turn this off? https://github.com/ecomfe/vue-echarts/blob/311d588850b83debbea7f1e501f8ceddf7abec5f/src/ECharts.ts#L73C17-L73C22

How can I use native event listener on VChart in Vue 3 🤔， without wrapping an element around every v-chart?

[Justineo]

Vue-Echarts is delegating all events to ECharts itself and that's why it doesn't work (so that you can bind ECharts events directily like <v-chart @datazoom="..." />). You cannot do that with Vue 2 without a .native modifier either. Currently you need to an HTML element as a wrapper to bind events like mouseenter.