A New Vue On JavaScript30 - 05 Flex Panel Gallery

This article is part of the A New Vue On JavaScript30 series that explores re-implementing Wes Bos’s (@wesbos) #JavaScript30 projects using Vue. Today I will be tackling #JavaScript30’s 05 - Flex Panel Gallery project. This project displays a page of five images in vertical slices with words on them. When an image is clicked there is a neat animation to expand the image and slide in some additional text. My description doesn’t do it justice so how about an animated gif?

#JavaScript30 Finished Flex Panel Gallery

If you have been following along, you will notice that I’m skipping #JavaScript30’s 04 - Array Cardio Day 1 project. While this is a great exercise in learning about JavaScript Arrays, it doesn’t make sense to re-implement with Vue because nothing gets rendered to the page.

🔑 Vue Concepts

  • v-for directive
  • Class binding
  • Event binding

🏗️ Vue Implementation

The first step is the same as my other articles, grab the base starter file from my getting started article and insert the code from the original #JavaScript30 project into their corresponding Vue locations.

Animation of inserting #JavaScript30 code into their corresponding Vue locations

  • The HTML section was placed inside the root <div id="app">
  • The functions were placed into the methods section
  • The computed, mounted, and watch sections were removed because they were not needed
  • The <style> section was maintained with no changes

From here, my approach was more or less the same as I took when doing the JavaScript Drum Kit project. First, take the repetitive HTML sections and convert them into an array of objects.

Then, loop the array using the v-for directive to create each panel <div>.

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 class to maintain the original CSS styles. Rather than toggle the classes, I used isOpen and isActive boolean flags to keep track of state.
  • Bound the @transitionend event to the toggleActive() function and the @click event to the toggleOpen() function. This is the Vue equivalent of #JavaScript30 using addEventListener() with those events.

🏁 Putting It All Together

The Flex Panel Gallery is another great project by Wes Bos’s #JavaScript30 but since the approach to create a Vue version was so similar to the JavaScript Drum Kit project, I decided to not go into as much detail on the explanations. If things don’t click for you here, give that article a quick read. Here are links to the #JavaScript30 version and my Vue version:

I hope you enjoyed this article, feel free to message me with any questions, comments, or corrections. All code presented within this series is available in my fork of the official #JavaScript30 GitHub repository which is located at:

🔜 Up Next

Next in the A New Vue On JavaScript30 series will be #JavaScript30’s “06 - Type Ahead” project. I’ll add a link here when it’s published.

Share