getSourceData(), afterchange Handsontable js vue

Posted 2023-03-22

【中文标题】getSourceData(), afterchange Handsontable js vue

【英文标题】：

【发布时间】：2020-08-16 09:08:18

【问题描述】：

我需要 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
  
)

【参考方案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/

【讨论】：

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

me dice que debo invok ` idalumno: (...)matricula: (...)nombre_alumno: (...)punteos: (...)__ob__: Observer value: ... , dep: Dep, vmCount: 0get 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 `

如果您只收到ob: Observer。似乎ajax还没有完成。尝试等待响应或在接收数据后重新加载组件

尝试使用您在项目中使用的代码更新问题。与响应。

嗨！ @HANS FELIX RAMOS，你可以帮我解决这个问题。请 -> ***.com/questions/62853736/…