Let me explain my specific case: I want to create an input-widget that can display a large number of checkboxes, divided into three parts based on user-specified data.
My plan is to initially hide these three subsections with a header indicating their presence. When a user clicks on a header, the corresponding content will slide in without any actual conditional rendering. Additionally, when one section is opened, I would like to automatically hide any other open sections.
I found some inspiration on how to approach this issue from a discussion about smoothly animating v-show in VueJS on Stack Overflow:
Smoothly animate v-show in VueJS
Although the mentioned solution mainly focuses on binary cases, I am considering using a status indicator object in my Vue component:
[...]
data:function(){
return {
sectionShowStatuses: {
first: false,
second: false,
third: false
}
}
}
[...]
My idea is to update the status indication based on user interactions with the section headers and link the presence of CSS classes to this information to achieve a smooth slide-in/out effect. Is this approach considered best practice, or is there a more elegant way to achieve the desired functionality in Vue?