Vuex example

An implementation of the @handsontable/vue component with a readOnly toggle switch and the Vuex state manager implemented.

Vuex store dump:

Vuex store dump:import Vue from 'vue'; import { HotTable } from '@handsontable/vue'; import Handsontable from 'handsontable'; new Vue({ el: "#example1", data: function() { return { hotSettings: { data: Handsontable.helper.createSpreadsheetData(4, 4), colHeaders: true, rowHeaders: true, readOnly: false, afterChange: () => { if (this.hotRef) { this.$store.commit('updateData', this.hotRef.getSourceData()); } } }, hotRef: null }; }, mounted: function() { this.hotRef = this.$refs.wrapper.hotInstance; this.$store.subscribe((mutation, state) => { this.updateVuexPreview(); }); this.$store.commit('updateData', this.hotRef.getSourceData()); }, methods: { toggleReadOnly: function(event) { this.hotSettings.readOnly = event.target.checked; this.$store.commit('updateSettings', {prop: 'readOnly', value: this.hotSettings.readOnly}); }, updateVuexPreview: function() { // This method serves only as a renderer for the Vuex's state dump. const previewTable = document.querySelector('#vuex-preview table'); let newInnerHtml = ''; for (const [key, value] of Object.entries(this.$store.state)) { newInnerHtml += ``; if (key === 'hotData' && Array.isArray(value)) { newInnerHtml += `hotData:
`; for (let row of value) { newInnerHtml += ``; for (let cell of row) { newInnerHtml += ``; } newInnerHtml += ``; } newInnerHtml += `

${cell}

`; } else if (key === 'hotSettings') { newInnerHtml += `hotSettings:

`; for (let settingsKey of Object.keys(value)) { newInnerHtml += `
• ${settingsKey}: ${this.$store.state.hotSettings[settingsKey]}
`; } newInnerHtml += `

`; } newInnerHtml += ``; } newInnerHtml += ``; previewTable.innerHTML = newInnerHtml; } }, components: { HotTable }, store: new Vuex.Store({ state: { hotData: null, hotSettings: { readOnly: false } }, mutations: { updateData(state, hotData) { state.hotData = hotData; }, updateSettings(state, updateObj) { state.hotSettings[updateObj.prop] = updateObj.value; } } }) });

Edit this page