By using handsontable-vue, showing vue component in the header loses all the event handlers

Tags: #<Tag:0x00007efc61d13120>
#1

Description
Instead of rendering simple text in the header, I want to render a vue component. It can be done by returning the vueInstance.$el.outerHTML to “colHeaders”. However, all the event handlers defined on that component are lost.
I would expect all those events should be kept.

Steps to reproduce

  1. Click the button outside of the table. It updates itself with click counts.
  2. Click the button inside of the header of table. It doesn’t update.
    Demo
    https://jsfiddle.net/guobacai/jtu4r3pf/37/
    Note: Please suggest the correct way if I am doing this in wrong way.

Your environment
Vue wrapper version: 2.0.0
Handsontable version: 6.1.1
Browser Name and version: Chrome 69
Operating System: Mac

#2

Thank you for sharing the demo.

I have asked our developer to check this example. I will be back with news as soon as possible.

#3

Hi @jli

I just got a reply that in the example you are attaching a couple of elements to the same id. I have a demo that may help https://jsfiddle.net/r6myobx5/

#4