javascript - pro - Handsontable en VueJS, la tabla carga solo en la página de recarga

vue spreadsheet

Question

Estoy usando Handsontable con vainilla javascript dentro de una aplicación de una sola página VueJS. Usando el siguiente oyente:

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

la tabla solo aparece en una actualización de página, no carga inicial. También intenté usar:

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

pero la tabla no se muestra en absoluto (tampoco se muestra si elimino el oyente DOMContentLoaded). Algunos de los ejemplos en el sitio handsontable ej. Https://docs.handsontable.com/0.18.0/demo-bootstrap.html usan el oyente DOMContentLoaded, otros no usan ningún oyente.

El código de la página VueJS está debajo.

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> 

Intenté mover el código de Handsontable fuera del bloque predeterminado de exportación VueJS, es decir:

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

Pero me llega un error lanzado por handsontable.js:

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

¿Alguna idea sobre la mejor manera de integrar Handsontable con VueJS? (Intenté vue-handsontable y vue-handsontable-official, pero tuve problemas para obtener el trabajo).

Answer 1

Puede intentar eliminando el listner de eventos: document.addEventListener(''DOMContentLoaded'' y ejecutar directamente este código en mounted , ya que DOMContentLoaded en vue es más o menos equivalente a DOMContentLoaded , como por ejemplo:

<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>