Handsontable with vue2

Tags: #<Tag:0x00007efc64627160>
#1

I have several problems with using handsontable/vue.

  1. I naturally assumed if I send tableData as a computed property into HotTable, that it will rerender the table with new data, whenever source data changes… However it happens that when tableData is changed, old data is still shown.

How to make sure that table always shows latest data?

 <HotTable
      :data="tableData"
      :settings="hotTableSettings"
      class="hot-table-custom"
      ref="hotTableRef"
    >
      <HotColumn
        v-for="header of hotColumnHeaders"
        :key="header"
        :title="header"
        :data="header"
        class="hot-table-column-custom"
      ></HotColumn>
    </HotTable>
  1. I have problem when mounting HotTable vue complains that vuex should not be mutated outside of mutation handlers. I’m pretty sure in my code I do not do that, so I figured that HotTable does some two way binding and actually writing directly.

How to go around this problem? Problem seems to be in core.loadData.

vue.runtime.esm.js?2b0e:1888 Error: [vuex] do not mutate vuex store state outside mutation handlers.
    at assert (vuex.esm.js?2f62:135)
    at Vue.store._vm.$watch.deep (vuex.esm.js?2f62:893)
    at Watcher.run (vue.runtime.esm.js?2b0e:4568)
    at Watcher.update (vue.runtime.esm.js?2b0e:4542)
    at Dep.notify (vue.runtime.esm.js?2b0e:730)
    at Array.mutator (vue.runtime.esm.js?2b0e:882)
    at DataMap.spliceData (dataMap.mjs?4588:652)
    at DataMap.createRow (dataMap.mjs?4588:369)
    at Object.adjustRowsAndCols (core.mjs?24d7:706)
    at Core.loadData (core.mjs?24d7:2214)

Thanks in advance.

#2

Hi @perpetualwarr

Our state-management system is on the way. Till that time the best tutorial on Vuex is available here https://handsontable.com/docs/vue-vuex-example/#overview
Have you already tested it out using that tutorial?

#3

First problem is solved on my end, I just clear data state when destroying the hotTable and later new data will be inserted correctly.

However, biggest problem I still have is that when any cell or row is updated, it handsontable automatically mutates the state , which is residing in vuex store.

How to work around that? I don’t want hot to mutate data objects, but I want to call my mutations handlers and to save new data manually?

It seems to me that loadData is mutating source data and that is a problem.

18
Screenshot 2021-12-24 at 12.26.18.png2228×488 110 KB

#4

Due to the holiday season, most of our experts are unavailable. But I will send a request to the team to check what should be done and I will update you as soon as I get their reply.

1 Like
#5

Hi @perpetualwarr

Please tell me if you are using minSpareRows or any other mechanism that automatically ads new rows when a cell value is changed? (That seems to be the first thing that can be responsible for that error).

#6

@aleksandra_budnik Hm, actually I do use that property with value of 1. I find that option useful. Are you suggesting I should remove that property and manually take care of adding new empty row?

#7

Yes, it might be better to add that row manually. This way you know that your new change comes from a data edit that the user made. You can use the afterChange hook to check if the user changed data in the empty row and then use the alter method to add a new row. This way you will be able to remove that row addition from the equation.

1 Like
#8