VueJS 中的 Handsontable，表仅在页面重新加载时加载答案

【问题标题】：Handsontable in VueJS, table loads only on page reloadVueJS 中的 Handsontable，表仅在页面重新加载时加载
【发布时间】：2017-08-27 02:01:33
【问题描述】：

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

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-official 但两者都无法正常工作）？

【问题讨论】：

标签： javascript vue.js vuejs2 handsontable

【解决方案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>

【讨论】：

VueJS 文档没有详细说明何时使用 created 和 Mounted - 一般而言，什么时候应该使用 created 和 Mounted？
@DonSmythe created、mounted 等在 DOM 渲染时的不同时间点执行 hooks。你可以看到这些细节here。 Mounted 是 DOM 被渲染的时候。

【解决方案2】：

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

附：您也可以考虑使用替代表，HT 是基于旧技术构建的，忽略了 VNode 想法等。

【讨论】：