Vue рендеринг функции click обработчик не работает

1

Я использую функцию render в Vue:

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

По какой-то причине он не работает с директивой Vue v-on:click:

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

Хотя это работает:

span(@click="alert()")
  t-button.white Send // PUG template
Теги:
vue.js

1 ответ

0
Лучший ответ

Хотя это явно не рассматривается в документах, насколько я вижу, события автоматически не привязаны к функционально отображаемым компонентам.
Один из вариантов - вручную передать все слушатели по умолчанию в объект данных.

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>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню