vuejs handsontable official and calling handsontable method

Question

I'm a beginner, this is probably more of a javascript problem than vue but anyway:

there a plugin for spreadsheet named handsontable and in the normal use you make the table by doing this

hot = new Handsontable(container, {option})

and then you can use the method like hot.loadData() etc..

To use handsontable with vuejs, there a wrapper we can find here https://github.com/handsontable/vue-handsontable-official. With the wrapper you make a table like this :

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

So it work fine when i give an array but to load the data from a DB you must call the handsontable method hot.loadData(data).

i cannot find how to call this method in vuejs i always get the error TypeError: root.loadData is not a function

i tried with all i could think of instead of root ex: HotTable.loadData(value)

but to no avail

Can someone point me out how i would call handsontable methods from the vuejs wrapper. Or point me out what kind of reading i should do to understand my mistake. Thank a lot

Answer 1

There are two problems here, not bad ones :)

1st problem:

If you want to refer to your data inside Vue's methods/computed properties/watchers/lifecycle events, you should use the this keyword. If you have data: function() { return { root: "root-value" }} and you would like to console.log that "root-value" string, you should write console.log(this.root) inside your mounted handler.

If you had something like:

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

You could call hot.loadData() like so:

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

So this refers to the Vue instance which exposes your data properties.

2nd problem:

If I understand the component wrapper correctly, you are supposed to pass data to it as props, not call any Handsontable methods directly.

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

This means that Vue passes whatever you have as root in your data to the HotTable component. It also passes whatever you have as settings in your data. In the example, HotTable receives these:

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

Now if you want to change/update/modify/add data that should be passed to the HotTable component, you should update your data in the Vue instance. You should do something like this.hotSettings = something new and this.root = something else and the HotTable component would receive those.

To understand what's really happnening with the HotTable, read all of the component documentation. Really. You will save lots of time if you read through the documentation. It all makes sense after that! https://v2.vuejs.org/v2/guide/components.html