Question

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

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

hot = new Handsontable(container, {option})

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

要与vuejs一起使用handontable，我们可以在这里找到一个包装器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包装器调用handsontable方法。或者指出我应该做什么样的阅读来理解我的错误。非常感谢

Answer 1

这里有两个问题，不错的问题：）

第一个问题：

如果您想在Vue的方法/计算属性/观察者/生命周期事件中引用您的数据，您应该使用this关键字。如果您有数据：function（）{return {root：＆＃34; root-value＆＃34;并且你想console.log那个＆＃34; root-value＆＃34;你应该在你的挂载处理程序中编写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实例中的数据。你应该这样做.hotSettings = 新的东西和this.root = 别的东西，HotTable组件会收到这些。

要了解使用HotTable真正感受到的是什么，请阅读所有组件文档。真。如果您仔细阅读文档，将节省大量时间。之后这一切都有意义！ https://vuejs.org/v2/guide/components.html

vuejs handontable官方和调用handsontable方法

1 个答案: