Handson Vue Table

Data does NOT seem to be referenced

by Dave Stewart

HTML

<div id="example1" class="hot">
  
  <h2>Data</h2>
  <pre>{{ table }}</pre>
  
  <h2>1-way update</h2>
  <label>Cell 0-0: 
    <input type="text" v-model="table[0][0]">
  </label>
  
  <h2>Table</h2>
  <hot-table ref="table" :settings="hotSettings"/>

</div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css">
<script src="https://handsontable.com/docs/7.0.3/scripts/jsfiddle-fixer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/[email protected]/dist/vue-handsontable.min.js"></script>

Babel + JSX

import Vue from 'vue';
  import { HotTable } from '@handsontable/vue';
  import Handsontable from 'handsontable';
  
  const table = Handsontable.helper.createSpreadsheetData(2, 2)
  
  new Vue({
    el: '#example1',
    
    components: {
      HotTable
    },
    
    data () {
      return {
      	table,
        hotSettings: {
          data: table,
          colHeaders: true,
          minSpareRows: 1,
          
          // update after changes
          afterChange: () => {
          	const ref = this.$refs.table
            if (ref && ref.hotInstance) {
            	const data = ref.hotInstance.getSourceData()
              
              // teh data is complete...
              console.log(data)
              
              // but re-setting the data only shows some of it 
              this.table = data
            }
          }
        }
      }
    }
  });