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.