Does anyone have any experience using Handsontable (a JavaScript spreadsheet library) with VueJS?
VueJS itself will bind with the an array set as part of an instance’s data. By right when the bound data is change, VueJS will update itself, much like Handsontable.
If I have a text-field bound using v-model to a field inside the array (which represent 1 cell), the text-field will show the correct value. Changing the text-field will change the value of the cell, but changing the cell in the spreadsheet though will not update the value the text-field.
Any idea how I could make this works two-way?
Here’s the source code for the component:
<template>
<div>
<input type='text' v-model='grid[0][1]'>
<div id="grid"></div>
</div>
</template>
<script>
import BoxComponent from './BoxComponent.vue'
export default{
data(){
return {
prospects: [],
grid: [
["", "Ford", "Volvo", "Toyota", "Honda"],
["2016", 10, 11, 12, 13],
["2017", 20, 11, 14, 13],
["2018", 30, 15, 12, 13]
],
field: ''
}
},
components: {
'box-component' : BoxComponent
},
activate:function(done) {
done();
},
ready:function(){
//console.log("ready");
this.$nextTick(function(){
var hot = new Handsontable(this.$el.querySelector('#grid'), {
data: this.grid,
rowHeaders:true,
colHeaders:true,
afterChange:function(){
console.log(this.getData());
}
});
});
}
}
</script>