Handsontable在VueJS，表加载只有在页面重载

Question

我使用Handsontable香草的javascript VueJS单页的应用程序中。使用以下监听器：

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

该表只出现在页面刷新，而不是初始加载。我使用也尝试：

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

，但该表不显示在所有（也没有显示如果删除DOMContentLoaded监听器）。一些对handsontable网站如https://docs.handsontable.com/0.18.0/demo-bootstrap.html的例子使用DOMContentLoaded监听别人不使用任何监听器。

的VueJS页面代码如下。

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>  

我试图移动Handsontable代码VueJS出口默认块即外：

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

但我得到handsontable.js抛出一个错误：

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

就如何最好地Handsontable与VueJS集成任何想法？ （我尝试vue-handsontable和vue-handsontable官方，但有问题要么工作）？

Answer 1

您可以通过删除事件听者尝试：document.addEventListener('DOMContentLoaded'和mounted直接执行该代码，如VUE mounted大致相当于DOMContentLoaded，像以下：

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