Problem using slot inside a Vue Component
Problem using slot inside a Vue Component
alonsofc
Posts: 6Questions: 0Answers: 0
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.
Replies
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.
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
Ok Allan, I'll keep an eye out because I really need that functionality. Thanks.
Hi Allan, do you have any good news on this topic yet? Thanks.
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.
@allan Any update on this, I'm facing the same issue.
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