Handsontable in VueJS, Tabelle lädt nur auf Seite neu laden

Question

Ich benutze Handsontable mit Vanille Javascript in einer VueJS-Einzelseite Anwendung. Verwenden des folgenden Listeners:

Die Tabelle wird nur auf einer Seitenaktualisierung angezeigt, nicht beim ersten Laden. Ich habe auch versucht mit:

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

aber die Tabelle überhaupt nicht angezeigt (auch nicht zeigen, wenn ich den Hörer DOMContentLoaded entfernen). Einige der Beispiele auf der Handsontable-Seite, zB https://docs.handsontable.com/0.18.0/demo-bootstrap.html, verwenden den DOMContentLoaded-Listener. Andere verwenden keinen Listener.

Der VueJS Seitencode ist unten.

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>  

Ich versuchte, den Handsontable Code außerhalb des VueJS Exportstandardblock dh bewegt:

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

Aber ich einen Fehler handsontable.js geworfen erhalten:

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

Haben Sie Ideen, wie Sie Handsontable mit VueJS am besten integrieren können? (Ich versuchte vue-handsontable und vue-handsontable-official, hatte aber Probleme, entweder zur Arbeit zu kommen)?

Answer 1

Sie können versuchen, durch das Ereignis listner Entfernung: document.addEventListener('DOMContentLoaded' und direkt diesen Code ausführen auf mounted, wie mounted in vue entspricht in etwa der DOMContentLoaded, wie folgt vor:

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