Problems after update to ver 12

Tags: #<Tag:0x00007efc652e9da8>
#1

Initialization of table fails with this error: TypeError: Cannot read properties of undefined (reading 'wtTable')

 // instantiate a new Handsontable
    const hotDiv = document.getElementById(hotTarget);
    hotInstance.value = new Handsontable(hotDiv, {
      licenseKey: hotLicenseKey,
    });

After instantiating new hotTable, I do this:

// actually load table
    hotInstance.value.loadData(rows);
    hotInstance.value.updateSettings({
      afterGetColHeader,
      colHeaders,
      beforeColumnSort,
      afterOnCellMouseOver,
      afterOnCellMouseOut,
      columns,
      afterChange,
      columnHeaderHeight: 30,
      rowHeights: 30,
      columnSorting: true,
      readOnly: props.readOnly,
      dataSchema,
      hiddenColumns,
      minSpareRows: props.minSpareRows,
    });
    hotInstance.value.render();

This is same logic that was working in ver.11.

I checked the migration guide and it seems to me that I’m already loading data in a recommended way.

Please advise.

#2

hotInstance is reactive reference, const hotInstance = ref(null). Why is it invalid to put returned value from constructor into reactive ref?

If I just use normal variable, it works, but later I lose reference when I wanna call destroy on it.

Dunno what is happening here. I will try to make reproduction for you to investigate.

#3

Basically I took it out of ref, and it works. Just unsure why would it not work otherwise. Ref is Vue’s concept of reactive reference for local state.

Luckily, I can deal without it, but still would like to know what is happening here. Version 11 was working nicely with being in ref.

Cheers.

#4

Hi @perpetualwarr

Thank you for pointing that out. Were you able to make an example that shows the error? That way I can report it as an issue on our GitHub for further investigation.

#5

Hi @perpetualwarr

I was also curious what was the issue. Could you share some details?