Update to the Documentation

[PeterPilley]

Hi was battling with this today after following the docs and not getting the same result.

I had to return Table in setup() to be able to call in within onMounted if I followed the docs as written I was not able to access table.value.dt();

Happy to do a proper write up for the docs if needed

[AllanJard]

Hi,

Yes, if you could elaborate further for me, that would be great. I've had the code from here running okay (there are links to Stackblitz examples in the post).

Thanks!

[PeterPilley]

Thanks for coming back so quickly.

I had it running in your example here as well, using the same example you had provided. Link: https://stackblitz.com/edit/datatables-net-vue3-ajax-cskffu?file=src/App.vue

However when I tried to do this in my own code I would receive an error that dt is undefined. The only way I could get around this was to structure my setup() like this

		const table = ref();
		let dt;


		onMounted(function ()  {

			// Update the logging datatable
			// to ensure new data is captured
			// and displayed
			dt = table.value.dt();
			dt.ajax.reload(null, false);
		})
		return { table }

I checked my package.json to confirm I was using the latest versions

    "datatables.net-buttons": "^2.3.3",
    "datatables.net-dt": "^1.13.1",
    "datatables.net-select": "^1.5.0",
    "datatables.net-vue3": "^2.0.0",
    "vue": "^3.2.44"

Does that make sense?

[AllanJard]

Was it dt = table.value.dt(); that was reporting undefined? I don't actually see why return {table} would change that?

[PeterPilley]

Was it dt = table.value.dt(); that was reporting undefined? I don't actually see why return {table} would change that?

Yes it was reporting on dt = table.value.dt();

The only difference I can see in the scripts is stackblitz has lang='ts' but I dont see how that would affect it.

as soon as I returned table from Setup I was able to access and manipulate the datatable.

[AllanJard]

Are you able to build a little demo repo that shows the issue so I can dig into it?