Javascript 在VueJS中可手持，仅在页面重新加载时加载表

我在VueJS单页应用程序中使用了Handsontable和香草javascript。使用以下侦听器：

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

该表仅在页面刷新时显示，而不是在初始加载时显示。我还尝试使用：

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

但是该表根本不显示（如果我删除DOMContentLoaded侦听器，也不会显示）。handsontable站点上的一些示例（例如使用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集成，您有什么想法吗？（我尝试了vue handsontable和vue handsontable official，但两者都无法正常工作）？

您可以尝试删除事件列表器：

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> 

从“Handsontable”导入Handsontable
导入“handsontable/dist/handsontable.full.css”
导出默认值{
名称：“表视图”，
数据（）{
返回{
tableData:{}
}                       
},                        
moined:function（）{
这个。populateHot（）
},    
方法：{
populateHot:function（）{
风险值数据=[
[“起亚”、“日产”、“丰田”、“本田”、“马自达”、“福特”]，
['2012', 10, 11, 12, 13, 15, 16],
['2013', 10, 11, 12, 13, 15, 16]
]
var container1=document.getElementById（'示例'）
var hot1=新的可手持设备（container1{
数据：数据，
startRows:2，
startCols:5
})
}
}

使用mounted方法，当您必须使用mounted和created时，最大的区别是将元素添加到DOM中。当您需要与其他非vue部件连接时，这是一个非常常见的问题

---

S.S.也可以考虑使用替代表，HT是基于旧技术而忽略VNode思想等的。

Vuujs文档没有详细说明何时使用创建的VS，通常当你使用创建的VS安装时，@ DONSMY等等在DOM呈现时的不同时间点执行。ose详细信息。在呈现DOM时挂载。

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

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