netlify[bot]
commented
6 months ago Deploy Preview for sensational-seahorse-8635f8 ready!
| Name | Link |
|---|---|
| Latest commit | 0e9c9ac3c23d96d42635d334a3de3fd1fc591c98 |
| Latest deploy log | https://app.netlify.com/sites/sensational-seahorse-8635f8/deploys/65ac35d4e237780008799551 |
| Deploy Preview | https://deploy-preview-262--sensational-seahorse-8635f8.netlify.app |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify site configuration.
This is a fix for #238
When accordion panels are rendered dynamically the order calculations won't work properly because the actual DOM render and FwbAccordionPanel.vue onMounted function order are reversed. So the last rendered element has the order 0. This happens when the key attribute is unique each time. For this reason, I have updated the order calculation to check the actual DOM index. I have explained this in detail below with screenshots.
I have added onUnmounted to delete panel references that are removed.
In the composable files, the panel count calculation is wrong because it checks the keys of the 'panel' object. It always has 3 props: id, isVisible, and order. So in the calculation, the panel count is always 3. I have updated this to check the keys of the 'panels' object.
Lastly, I have updated some classes to match flush accordion styles.
Accordion Panel Render Issue
To test this, I have added an input as the number of accordion panels. And made sure it's a full render each time, by updating the id. I have also passed the title as a prop to log the title.
Then I logged the calculated count and title (FwbAccordionPanel.vue)
Here is the result