getSourceData(), afterchange Handsontable js vue

Question

I need getSourceData() afterchange but for it, I need too instance handsontable. i don't know to get instance handsontable on vue. Realty I need all row its has edited

ex.

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

console.log(my_instance.getSourceData())

My error

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

MY EXAMPLE https://jsfiddle.net/hmwus0xz/

code:

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

Hans Felix Ramos · Accepted Answer · 2020-05-01T21:22:32.110

1

First, make data as a function and afterChange as an arrow function in order to get this value as a Vue instance.

On loading table hotInstance will be null(only once). Check it to avoid errors.

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/

edited May 01 '20 at 21:22

answered May 01 '20 at 21:09

Hans Felix Ramos

4,264
3
16
40

1

fijate que me da esto con vue ´{__ob__: Observer}´ pero cuando lo hago con js puro me tira lo que deseo '{idalumno: "1648", matricula: "2-2018", nombre_alumno: "Beteta López Rudy Josué ", punteos: {…}}' ya que lo boy a mandar por ajax – Carlos May 01 '20 at 22:25
1

me dice que debo invok ` idalumno: (...)matricula: (...)nombre_alumno: (...)punteos: (...)__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}get idalumno: ƒ reactiveGetter()set idalumno: ƒ reactiveSetter(newVal)get matricula: ƒ reactiveGetter()set matricula: ƒ reactiveSetter(newVal)get nombre_alumno: ƒ reactiveGetter()set nombre_alumno: ƒ reactiveSetter(newVal)get punteos: ƒ reactiveGetter()set punteos: ƒ reactiveSetter(newVal)__proto__: Object ` – Carlos May 01 '20 at 22:47
If you get just `{ob: Observer}`. it seems to the ajax is not finished yet. Try to await the response o reload the component after the data is recivied – Hans Felix Ramos May 01 '20 at 22:50
try to update the question with the code you are using on your project. with the responses. – Hans Felix Ramos May 01 '20 at 22:58
1

Hi!! @HANS FELIX RAMOS, you can help me whit this. pleasss -> https://stackoverflow.com/questions/62853736/how-to-load-data-to-handsontable-using-vue-when-amount-or-created – Carlos Jul 11 '20 at 22:20
Let me check the answer! – Hans Felix Ramos Jul 12 '20 at 00:38

getSourceData(), afterchange Handsontable js vue

1 Answers1