Dave Follett Oct 10 Originally published at davefollett.io on Oct 09, 2018
🔑 Vue Concepts
- Class binding
- Event binding
🏗️ Vue Implementation
- The HTML section was placed inside the root
- The functions were placed into the
watchsections were removed because they were not needed
<style>section was maintained with no changes
Then, loop the array using the
v-for directive to create each panel
Within the loop, I did the following:
- Inserted the three words to their
<p>elements using text interpolation (the “Mustache” syntax double curly braces).
- Bound the proper
classto maintain the original CSS styles. Rather than toggle the classes, I used
isActiveboolean flags to keep track of state.
- Bound the
@transitionendevent to the
toggleActive()function and the
@clickevent to the
addEventListener()with those events.
🏁 Putting It All Together
🔜 Up Next