Handsontable in VueJS, table loads only on page reload

Question

I am using Handsontable with vanilla javascript inside a VueJS single page application. Using the following listener:

document.addEventListener('DOMContentLoaded', function() ...

the table only appears on a page refresh, not initial load. I also tried using:

document.addEventListener('load', function() ...

but the table doesn't show at all (also doesn't show if I remove the DOMContentLoaded listener). Some of the examples on the handsontable site eg https://docs.handsontable.com/0.18.0/demo-bootstrap.html use the DOMContentLoaded listener others don't use any listener.

The VueJS page code is below.

TableView.vue:

<template>
    <div id="example"></div>
</template>

<script>
import Handsontable from 'handsontable'               
import 'handsontable/dist/handsontable.full.css'      
export default {            
  name: 'TablesView',       
  data () {                 
    return {                
      tableData: {}  
  }                       
},                        
created: function () {     
  this.populateHot()      
},    
methods: {
  populateHot: function() {
    document.addEventListener('DOMContentLoaded', function() {
      var data = [
        ['', 'Kia', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
        ['2012', 10, 11, 12, 13, 15, 16],
        ['2013', 10, 11, 12, 13, 15, 16]
      ]
      var container1 = document.getElementById('example')
      var hot1 = new Handsontable(container1, {
        data: data,
        startRows: 2,
        startCols: 5
      })
    })
  }
}
</script>      

I tried moving the Handsontable code outside the VueJS export default block ie:

<script>
import ....
var hotData = []
export default {...
// update hotData with ajax loaded data
}
function initializeHandsOn() {...}
document.addEventListener('DOMContentLoaded', initializeHandsOn(), false)
</script>

But I get an error thrown by handsontable.js:

Uncaught TypeError: Cannot read property 'insertBefore' of null(…)

Any ideas on how best to integrate Handsontable with VueJS? (I tried vue-handsontable and vue-handsontable-official but had problems getting either to work)?

Answer 1

You can try by removing the event listner: document.addEventListener('DOMContentLoaded' and directly execute this code on mounted, as mounted in vue is roughly equivalent of DOMContentLoaded, like following:

<script>
import Handsontable from 'handsontable'               
import 'handsontable/dist/handsontable.full.css'      
export default {            
  name: 'TablesView',       
  data () {                 
    return {                
      tableData: {}  
  }                       
},                        
mointed: function () {     
  this.populateHot()      
},    
methods: {
  populateHot: function() {
      var data = [
        ['', 'Kia', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
        ['2012', 10, 11, 12, 13, 15, 16],
        ['2013', 10, 11, 12, 13, 15, 16]
      ]
      var container1 = document.getElementById('example')
      var hot1 = new Handsontable(container1, {
        data: data,
        startRows: 2,
        startCols: 5
      })
  }
}
</script>