afterChange does not trigger for column with array (Vue.js)

Getting help Questions
1

Hi, I hope all is well,

I am trying to use HOT’s afterChange hook, but the event doesn’t get trigger when the data in a cell is an array. I am using vue.

Here’s an example: https://codesandbox.io/s/blue-forest-wyi80?file=/src/App.vue

As you can see in the console, when the first column is changed, nothing happens.

Thank you.

2

Hi @johnverde

Handsontable accepts an array of arrays or an array of objects as a dataset. You can use further nesting but you’d require to pass an object. Here’s an example https://handsontable.com/docs/8.2.0/tutorial-data-sources.html#page-nested

3

Thank you for your answer @aleksandra_budnik!

Searching more on this subject, I managed to find Consuming array data in table cell values and Issue editing cells that are an array of values. Still, I’m at a loss.

Would you mind elaborating on how to properly map my columns so I can support cells with arrays as values?

Thank you

4

Hi @johnverde

you can use a dataSchema to provide some nested values https://jsfiddle.net/AMBudnik/om2aw9qe/ but you’d still need to convert that array to an object.

5

I have checked your example, but there’s something I still don’t get. When trying to change the last column (Kids), the changes don’t stay. Even more so, the hook does not get triggered.

6

Are you able to replicate the same in my demo?

I’ve added the afterChange and it works fine

49
49221×150 3.9 KB
57

but maybe I test a different scenario

7

You are right. It was just my example that wasn’t working.

I finally gave up with schemas and just used a single string that uses the comma as a separator. That means, I need to convert the data from arr to str before display and from str to arr before my HTTP request.

I know this is less than optimal, but it would do the trick for now. This can be closed now. As always, you have been super helpful @aleksandra_budnik! Thank you.

1 Like