Convenient in VueJS, the table is only loaded on page reload
I am using Handsontable with vanilla javascript inside a VueJS single page app. Using the following listener:
document.addEventListener('DOMContentLoaded', function() ...
the table is only displayed on the refresh page, not on the bootstrap. I also tried using:
document.addEventListener('load', function() ...
but the table is not displayed at all (also not displayed if I remove the DOMContentLoaded listener). Some examples on the mobile site like https://docs.handsontable.com/0.18.0/demo-bootstrap.html use the DOMContentLoaded listener, others don't use the listener.
Below is the code for the VueJS page.
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 to move the Handsontable code outside the VueJS export block, i.e .:
<script>
import ....
var hotData = []
export default {...
// update hotData with ajax loaded data
}
function initializeHandsOn() {...}
document.addEventListener('DOMContentLoaded', initializeHandsOn(), false)
</script>
But I am getting the error sent by handsontable.js:
Uncaught TypeError: Cannot read property 'insertBefore' of null(…)
Any ideas on the best way to integrate Handsontable with VueJS? (I tried vue-handsontable and vue-handsontable-official but I'm having trouble getting it to work)?
source to share
You can try to remove the event list: document.addEventListener('DOMContentLoaded'
and directly execute this code on mounted
, as mounted
in vue it is roughly equivalent DOMContentLoaded
, for example:
<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>
source to share