Vuejs2 vuejs handsontable官方和调用handsontable方法_Vuejs2_Handsontable

Vuejs2 vuejs handsontable官方和调用handsontable方法

vuejs2

Vuejs2 vuejs handsontable官方和调用handsontable方法,vuejs2,handsontable,Vuejs2,Handsontable,我是一名初学者，这可能比vue更像是一个javascript问题，但无论如何：有一个名为handsontable的电子表格插件，在正常使用中，您可以通过这样做来创建表格 hot = new Handsontable(container, {option}) 然后可以使用hot.loadData（）等方法要将handsontable与vuejs一起使用，我们可以在这里找到一个包装器。使用包装器可以创建如下表： <template> <div id="hot-previ

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

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

hot = new Handsontable(container, {option})

然后可以使用hot.loadData（）等方法

要将handsontable与vuejs一起使用，我们可以在这里找到一个包装器。使用包装器可以创建如下表：

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


从“vue handsontable official”导入热表；
从“Vue”导入Vue；
导出默认值{
数据：函数（）{
返回{
根：'测试热'，
热设置：{
数据：['sample'，'data']]，
colHeaders：对
}
};
},
组成部分：{
热桌
}
挂载（）{
localfollow.config({
驱动程序：localfollow.INDEXEDDB，
名称：“匹配列表数据库”
})
getItem（'DB'）。然后（函数（值）{
log（'然后我获取DB:'+JSON.stringify（value））
如果（值！='null'）{
log（'dB contain something'）
**根**.loadData（值）
}

因此，当我给出一个数组时，它可以正常工作，但要从DB加载数据，必须调用handsontable方法hot.loadData（data）

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

我尝试了所有我能想到的方法，而不是根ex:HotTable.loadData（value）

但无济于事

有人能告诉我如何从vuejs包装器中调用handsontable方法吗？或者告诉我应该如何阅读才能理解我的错误。非常感谢这里有两个问题，不是很严重：）

第一个问题：

如果要在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（）：

因此，这是指公开数据属性的Vue实例

第二个问题：

如果我正确理解了组件包装器，那么应该将数据作为道具传递给它，而不是直接调用任何可手持的方法

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

现在，如果要更改/更新/修改/添加应传递给热表组件的数据，则应更新Vue实例中的数据。您应执行以下操作。hotSettings=新操作，this.root=其他操作，热表组件将接收这些操作

要了解热表的真正情况，请阅读所有组件文档。真的。如果您通读文档，您将节省大量时间。在这之后，一切都是有意义的！

这里有两个问题，不是很严重：）