Access vue instance from handsontable

Question

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

Do you have any code which uses handsontable with the code above? — IzumiSy
– IzumiSy, Commented Jan 5, 2018 at 14:38

Rosdi Kasim · Accepted Answer · 2018-05-21 03:19:17Z

3

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

answered May 21, 2018 at 3:19

Rosdi Kasim

26.4k25 gold badges139 silver badges165 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

proximacentauri · Accepted Answer · 2018-01-07 21:15:02Z

0

I ended up saving to a variable declared outside of vue - ie above the data () declaration

var myNewVar = 42
data() {
    #can save to myNewVar from here

answered Jan 7, 2018 at 21:15

proximacentauri

1,8796 gold badges30 silver badges56 bronze badges

Comments

Yue JIN · Accepted Answer · 2022-11-03 10:53:14Z

0

Just like @Rosdi_Kasim said, but much simpler with fat arrow function

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

edited Nov 3, 2022 at 10:53

Yue JIN

2,5101 gold badge18 silver badges33 bronze badges

answered Oct 28, 2022 at 11:12

Marcin Libelt

113 bronze badges

Collectives™ on Stack Overflow

Access vue instance from handsontable

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related