从handsontable访问vue实例答案

【问题标题】：Access vue instance from handsontable从handsontable访问vue实例
【发布时间】：2018-06-13 17:09:46
【问题描述】：

我正在尝试从 handsontable 中设置一个 vuejs 变量。

vuejs 变量：

this.dataChanged

在下面的代码块中无法通过手动设置获得，知道如何访问它吗？

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

【问题讨论】：

你有任何代码使用handsontable和上面的代码吗？

标签： vue.js handsontable

【解决方案1】：

我遇到了同样的问题...我在 GitHub 上找到了一个解决方法，就像这样..

这样你就可以像往常一样访问所有 Vue 的数据、方法等。

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

这里是原帖的链接：https://github.com/handsontable/vue-handsontable-official/issues/7#issuecomment-356190395

【讨论】：

【解决方案2】：

我最终保存到一个在 vue 之外声明的变量 - 即在 data () 声明之上

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

【讨论】：