getSourceData(), afterchange Handsontable js vue

Question

我需要 getSourceData() afterchange 但为此，我也需要可操作的实例。我不知道如何在 vue.js 上获取实例 handsontable。 Realty 我需要所有已编辑的行

例如

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 作为一个箭头函数，以便作为 Vue 实例获取 this 值。

加载时 table 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/

getSourceData(), afterchange Handsontable js vue

getSourceData(), afterchange Handsontable js vue

javascript

ref

handsontable

vue.js

vue-component