getSourceData(), afterchange Handsontable js vue

Question

我需要 getSourceData() afterchange 但为此，我需要实例化操作。我不知道在 vue 上获得实例可动手操作。房地产我需要所有已编辑的行

例如

const my_instance = this.$refs.myTable.hotInstance;

console.log(my_instance.getSourceData())

我的错误

vue.js:634 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'myTable' of undefined"
found in
--->

vue.js:1897 TypeError: Cannot read property 'myTable' of undefined

我的例子https://jsfiddle.net/hmwus0xz/

代码：

<div id="app">
    <div id="hot-preview">
      <HotTable :settings="settings" ref="myTable"></HotTable>
    </div>
  </div>

new Vue({
  el: "#app",
  data: {
  msg: 'test',
    settings: {
        data: [
          ["", "Ford", "Volvo", "Toyota", "Honda"],
          ["2016", 10, 11, 12, 13],
          ["2017", 20, 11, 14, 13],
          ["2018", 30, 15, 12, 13]
        ],
        colHeaders: true
      },
      afterChange: function (itemodificado, accionHanson) {
            const my_instance  = this.$refs.myTable.hotInstance;

                        console.log(my_instance.getSourceData())
            //mytable 

                if ( accionHanson != 'loadData') {
                    itemodificado.forEach(element => {
                        var fila = my_instance.getSourceData()[element[0]]
                         // fila = my_instance null
                        console.log(fila)
                    });
                }
            },
  },
  components: {
     'hottable': Handsontable.vue.HotTable
  }
})

Answer 1

首先，将data 设为函数，将afterChange 设为箭头函数，以便将this 值作为Vue 实例。

在加载表时hotInstance 将为空（仅一次）。检查它以避免错误。

new Vue({
  el: "#app",
  data() {
    return {
      msg: 'test',
      settings: {
        data: [
            ["", "Ford", "Volvo", "Toyota", "Honda"],
            ["2016", 10, 11, 12, 13],
            ["2017", 20, 11, 14, 13],
            ["2018", 30, 15, 12, 13]
          ],
          colHeaders: true,
          afterChange: (itemodificado, accionHanson)=> {
            if(!this.$refs.myTable.hotInstance) return;
            const my_instance  = this.$refs.myTable.hotInstance;
            console.log(my_instance.getSourceData())
            //mytable 

                if ( accionHanson != 'loadData') {
                    itemodificado.forEach(element => {
                        var fila = my_instance.getSourceData()[element[0]]
                         // fila = my_instance null
                        console.log(fila)
                    });
                }
            },
          },
      }
  },    
  components: {
     'hottable': Handsontable.vue.HotTable
  }
})

https://jsfiddle.net/hansfelix50/ev509wu6/