CODEWITHSUNDEEP
javascriptvue.js
xon52
xon52

Reputation: 736

VueJS Bubble Component Events

I'm trying to make a Vue component (of a custom canvas element) but have found that the component's regular events don't seem to bubble to the parent. Is there something obvious I'm doing wrong?

I really don't want to have to emit every possible HTML event from the component if I can avoid it. And if it's not clear: I am NOT talking about custom events - just onmousemove etc..

TIA

<div id="app">
  <xon-canvas @mousemove="handleMove"></xon-canvas>
</div>

Vue.component('XonCanvas', {
  template: '<canvas width="500" height="500"></canvas>'
  })

new Vue({
  el: '#app',
  methods: {
    handleMove (event) { console.log("I worked!") }
  }
});

CodePe Code

Upvotes: 0

Views: 417

Answers (1)

ittus
ittus

Reputation: 22403

One quick fix is adding v-on="$listeners"

Vue.component('XonCanvas', {
  template: '<canvas v-on="$listeners" width="500" height="500"></canvas>'
  }
)

https://codepen.io/ittus/pen/mKWyxZ

Upvotes: 4

Related Questions