How can I use getSourceData() after a change event in Vue? I need to access the instance of Handsontable, but I'm not sure how to do that in Vue. Essentially, I need to retrieve all rows that have been edited.
For example:
const my_instance = this.$refs.myTable.hotInstance;
console.log(my_instance.getSourceData())
Error message:
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
Here is an example https://jsfiddle.net/hmwus0xz/
Code snippet:
<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 (modifiedItem, action) {
const my_instance = this.$refs.myTable.hotInstance;
console.log(my_instance.getSourceData())
if (action != 'loadData') {
modifiedItem.forEach(element => {
var row = my_instance.getSourceData()[element[0]]
// row = my_instance null
console.log(row)
});
}
},
},
components: {
'hottable': Handsontable.vue.HotTable
}
})