VueJS 中的 Handsontable，table 仅在页面重新加载时加载

Question

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

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

table 仅出现在页面刷新时，而不是初始加载时。我也试过使用：

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

但 table 根本不显示（如果我删除 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-official 但都无法正常工作）?

Answer 1

你可以尝试去掉事件监听器：document.addEventListener('DOMContentLoaded'直接在mounted上执行这段代码，因为mounted在vue中大致等同于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>

Answer 2

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

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

VueJS 中的 Handsontable，table 仅在页面重新加载时加载

Handsontable in VueJS, table loads only on page reload

javascript

handsontable

vue.js

vuejs2