vuejshandsontable官方及调用handsontable方法

Posted 2023-03-22

【中文标题】vuejshandsontable官方及调用handsontable方法

【英文标题】：vuejs handsontable official and calling handsontable method

【发布时间】：2018-03-10 21:33:40

【问题描述】：

我是初学者，这可能比 vue 更像是一个 javascript 问题，但无论如何：

有一个名为 handsontable 的电子表格插件，在正常使用中，您可以通过这样做来制作表格

hot = new Handsontable(container, option)

然后就可以使用 hot.loadData() 等方法了。

要在 vuejs 中使用handsontable，我们可以在这里找到一个包装器https://github.com/handsontable/vue-handsontable-official。使用包装器，您可以制作这样的表格：

 <template>
  <div id="hot-preview">
    <HotTable :root="root" :settings="hotSettings"></HotTable>
  </div>
</template>

<script>
  import HotTable from 'vue-handsontable-official';
  import Vue from 'vue';

  export default 
    data: function() 
      return 
        root: 'test-hot',
        hotSettings: 
          data: [['sample', 'data']],
          colHeaders: true
        
      ;
    ,
    components: 
      HotTable
    
mounted () 
    localforage.config(
      driver: localforage.INDEXEDDB,
      name: 'matchlist-database'
    )
    localforage.getItem('DB').then(function (value) 
      console.log('then i fetch the DB: ' + JSON.stringify(value))

      if (value !== 'null') 
        console.log('dB contain something')
        **root**.loadData(value)
  
</script>

所以当我给出一个数组但要从数据库加载数据时它工作正常，你必须调用handsontable 方法hot.loadData(data)。

我找不到如何在 vuejs 中调用此方法我总是得到错误 TypeError: root.loadData 不是函数

我尝试了所有我能想到的而不是 root ex：HotTable.loadData(value)

但无济于事

谁能指出我将如何从 vuejs 包装器中调用可操作的方法。或者指出我应该做什么样的阅读来理解我的错误。非常感谢

【参考方案1】：

这里有两个问题，还不错:)

第一个问题：

如果你想在 Vue 的方法/计算属性/观察者/生命周期事件中引用你的数据，你应该使用 this 关键字。如果你有 data: function() return root: "root-value" 并且你想 console.log 那个 "root-value" 字符串，你应该在你挂载的里面写 console.log(this.root)处理程序。

如果你有类似的东西：

data: function() 
      return 
        hot = new Handsontable(container, option)
        ....
      ;

你可以像这样调用 hot.loadData()：

mounted() 
  this.hot.loadData();
  ...

所以这是指暴露数据属性的 Vue 实例。

第二个问题：

如果我正确理解组件包装器，您应该将数据作为道具传递给它，而不是直接调用任何 Handsontable 方法。

<HotTable :root="root" :settings="hotSettings"></HotTable>

这意味着 Vue 将您在数据中作为 root 拥有的任何内容传递给 HotTable 组件。它还会将您拥有的任何内容作为数据中的设置传递。在示例中，HotTable 接收这些：

root: 'test-hot',
hotSettings: 
  data: [['sample', 'data']],
  colHeaders: true

现在，如果您想更改/更新/修改/添加应该传递给 HotTable 组件的数据，您应该更新 Vue 实例中的数据。您应该执行类似 this.hotSettings = something new 和 this.root = something else 之类的操作，HotTable 组件会收到这些内容。

要了解 HotTable 到底发生了什么，请阅读所有组件文档。真的。如果您通读文档，您将节省大量时间。之后一切都说得通了！ https://vuejs.org/v2/guide/components.html

【讨论】：

我还发现了这个：***.com/questions/28330340/… 这可能会有所帮助。也许我可以对 vue 做同样的事情。 handsontable 中有很多方法，所以必须有一种方法可以从包装器中调用，我希望