[VUE 3] Unable to render Vue component in a cell

[lcgreen]

Hi I have been attempting to add Vue components to our grid component but have encountered an error doing so. I can recreate the issue within the vue-3 vue-render demo by changing the source code to use a store, as this is very similar to our setup.

The Vue columns are blank, and an error occurs in the console:

	// ../Bryntum Grid Trial/grid-5.6.6-trial/examples/frameworks/vue-3/javascript/vue-renderer
	// src/App.vue
	...
        const gridConfig = reactive(useGridConfig());
        const store = reactive(new Store({
            data: [],
            autoCommit: true
        }));

    const clickHandler = (html, color) => {
        Toast.show({ html, color, timeout : 3000 });
    };

    onMounted(() => {
        store.data = DataGenerator.generateData(5);
    })
    ...

The following error occurs:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'set')
    at eval (WrapperHelperVue3.js:69:1)

Please can someone help resolve this, as it seems like an actual bug?

[ghulam.ghous]

Hi Icgreen,

I tried your code in our demo and there is no error and column is correctly rendered. Can you please provide us the complete test case where you are able to repro this issue? I have tried in version 5.6.6 (same version which is being used in online examples). I am uploading a clip and demo code here so you can see if there's any difference.

Clip Link: https://drive.google.com/drive/folders/1GiBJJC6GW9ceaXBgnx-BPjH6EV5HjzVg?usp=sharing

vue-renderer.zip

(349.37 KiB) Downloaded 25 times

Please provide us more details so we can repro this issue. Probably you can review this demo and any other config to that could help us to repro this issue.

Regards,
Ghous

[lcgreen]

Thanks for coming back to me so quickly, I have attached the demo with my changes, and the issue I am having.

Your project was not exporting the store and you still had the gridConfig initialising with demo data, which is why your demo still seemed to be working correctly.

[ghulam.ghous]

Hi there,

Thanks for sharing the test case. I was able to reproduce the issue in 5.6.6. But when I tried it in the latest release branch, the issue is already fixed. Probably it is fixed by this ticket https://github.com/bryntum/support/issues/8454/. The fix will be available in the release patch 5.6.7 that we are planning to release this week. For now if you want to avoid the issue, as a workaround please use any of the following two methods:

//Either initiate the store data with null instead of []
data       :  null

// or pass the data initially creating store and remove onMounted part.
data       :  DataGenerator.generateData(5)

Regards,
Ghous

[lcgreen]

I have tried using 5.6.7 but I still experience the same issue when trying to clear and load new data, only this time the error message is different. I have attached the source code, clicking the button below the grid displays the following error.

It also did not work when initialising with an empty array. It seems displaying is correct though when initialising with null, however there are issues when clearing the table and the Vue component not reinitialising

Cannot read properties of undefined (reading 'delete')
TypeError: Cannot read properties of undefined (reading 'delete')
    at Proxy.processCellContent (webpack-internal:///./node_modules/@bryntum/grid-vue-3/src/WrapperHelperVue3.js:58:27)
    at Proxy.renderCell (webpack-internal:///./node_modules/@bryntum/grid/grid.module.js:28154:3176)
    at Proxy.render (webpack-internal:///./node_modules/@bryntum/grid/grid.module.js:28145:739)
    at Proxy.renderFromRow (webpack-internal:///./node_modules/@bryntum/grid/grid.module.js:28416:963)
    at Proxy.refresh (webpack-internal:///./node_modules/@bryntum/grid/grid.module.js:28430:122)
    at Proxy.refreshRows (webpack-internal:///./node_modules/@bryntum/grid/grid.module.js:30326:200)
    at Proxy.resumeRefresh (webpack-internal:///./node_modules/@bryntum/grid/grid.module.js:30338:837)
    at Proxy.internalOnStoreEndApplyChangeset (webpack-internal:///./node_modules/@bryntum/grid/grid.module.js:30176:391)
    at Proxy.trigger (webpack-internal:///./node_modules/@bryntum/grid/grid.module.js:2318:2999)
    at Proxy.syncDataset (webpack-internal:///./node_modules/@bryntum/grid/grid.module.js:9838:2088)

[ghulam.ghous]

Hi lcgreen,

I have checked again and the issue was that you have defined the store inside setup and it was reactive to changes. We do not expect our components to be reactive on each render. So I have moved the store to config and added updated the way of updating data. It will work with [] as well as null value. You can use either. Hopefully it meets your use case.

vue-renderer 2.zip

(252.57 KiB) Downloaded 27 times

Regards,
Ghous