getSourceData (), afterchange Handsontable js vue - PullRequest
Новая
       58

getSourceData (), afterchange Handsontable js vue

1 голос
/ 01 мая 2020

Мне нужна функция getSourceData () afterchange, но для нее мне нужен экземпляр экземпляра handsontable. я не знаю, чтобы получить экземпляр handsontable на vue. Realty Мне нужно, чтобы все строки были отредактированы

ex. 

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

1 Ответ

1 голос
/ 02 мая 2020

Сначала сделайте 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/

...