Problem using slot inside a Vue Component

alonsofc

Hello, I have the following problem:

In my Vue application, I have 2 components, in each component I have 1 table that are exactly the same, the only thing different is the data.

In each table, there is an "Actions" column, in which the "Edit", "View" or "Delete" button is displayed depending on the status of the row record.

When entering the component with table 1, the buttons are displayed correctly depending on the status, but if I move to component 2, the buttons in that table are not displayed correctly depending on the status.

Now, if I do the same exercise above but in reverse, I am in table 2 (I refresh the page), the buttons look fine, but when I move to the component with table 1, the buttons here are no longer displayed correctly.

I don't know what I might be doing wrong.

I am attaching an example on Stackbltiz:

https://stackblitz.com/edit/vitejs-vite-bs1gt9?file=src%2Fcomponents%2FTable1.vue

I hope for your help. Thank you.

alonsofc

I forgot to mention that when pressing the button of the second component I moved to, the alert does not correctly display the name according to the registry.

allan

I fear you've hit a bug there. I use a cache for the Vue components in the DataTable and I had thought it was 100% independent between tables, but actually it looks like it is shared, which results in the issue you are seeing - the buttons are getting pulled from table 1 into table 2!

I'll look into that.

Allan

alonsofc

Ok Allan, I'll keep an eye out because I really need that functionality. Thanks.

alonsofc

Hi Allan, do you have any good news on this topic yet? Thanks.

RaZzLe

I've also came to face with this problem. I have an HTML element on slotted column which its text depends on a cell value. When the relevant cell value changes, HTML element on slotted column doesn't show any activity.

paulhemen88

@allan Any update on this, I'm facing the same issue.

allan

I've just spent the afternoon on this getting increasingly frustrated by it (I should be writing documentation). But I think I've made some important progress. I've realised that in the demo above, the column definition object is shared between the two components. It is imported into both, but that is a real problem since DataTables mutates the original objects - thus resulting is at least part of the problem.

I'm going to have to come back to this before I put the keyboard through the screen...

Allan

allan

I believe I've resolved the issue now and have just published datatables.net-vue3 v3.0.3.

The original issue updated to use the new package is now working as it should.

Let me know how you get on the the new package, if you would be so kind.

Thanks,
Allan

paulhemen88

Thanks a lot

paulhemen88

@allan I fear that bug is still there.

allan

@paulhemen88 Darn! Can you create a test case showing the issue on StackBltiz or a minimal Git repo showing it, so I can debug and try to resolve it please?

Allan

allan

@paulhemen88 3.0.4 of datatables.net-vue3 is now out, which I believe might address the issue you were encountering.

Allan

alonsofc

Hi @allan, I have already updated to version 3.0.4 and it worked perfectly. Thank you very much.