CODEWITHSUNDEEP
javascriptvue.js
Alexander
Alexander

Reputation: 135

Vue render function click handler not working

I'm using the render function in Vue:

 export default {
    name: 'TButton',
    render (h) {
      return h('button', { 'class': { btn: true } }, this.$slots.default)
    }
  }

For some reason, it doesn't work with the Vue directive v-on:click:

t-button.white(@click="alert()") Send // PUG template

While this works:

span(@click="alert()")
  t-button.white Send // PUG template

Upvotes: 1

Views: 1848

Answers (1)

Etheryte
Etheryte

Reputation: 25310

While this isn't covered in the docs explicitly, as far as I can see, the events aren't automatically bound for functionally rendered components.
One option is to manually pass all the default listeners in the data object.

Vue.component('sample', {
  render: function(createElement) {
    return createElement('button', {
      on: this.$listeners
    }, this.$slots.default)
  }
})

new Vue({
  el: '#app',
  methods: {
    foo() {
      console.log('foo called')
    }
  }
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
  <sample v-on:click="foo()">bar</sample>
</div>

Upvotes: 2

Related Questions