vue.jshandsontable

Access vue instance from handsontable


I am trying to set a vuejs variable from within handsontable.

The vuejs variable:

this.dataChanged

in code block below is not available from handsontable settings, any idea how can I access it?

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

<script>
export default {

data() {

return {
  #vuejs variable i want to set from hot
  dataChanged: false,
  root: 'test-hot',
  hotSettings: {
    data: [{something: 0}],
    afterChange: function(changes, src) {
      if (src !== 'loadData') {
        this.dataChanged = true
      }
},
methods: {
  saveChanges: function () {
    if (this.dataChanged){
      //save data
    }
  }
}

Solution

  • I faced this same problem... I found a workaround posted on GitHub like so..

    This way you can access all Vue's data, methods, etc as you normally would.

    data() {
       return {
         hotSettings: {
           ...
           afterChange: this.afterChangeVue
           ...
         }
       }
    },
    methods: {
        afterChangeVue(changes, source) {
          console.log('changes, source => ', changes, source);
          console.log('this.$store => ', this.$store);
        },
    

    Here is the link to the original thread: https://github.com/handsontable/vue-handsontable-official/issues/7#issuecomment-356190395