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?

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.

• 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:

• #JavaScript30’s 05 - Flex Panel Gallery
• A New Vue On JavaScript30’s 05 - Flex Panel Gallery

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:

• https://github.com/davefollett/JavaScript30

🔜 Up Next

Next in the A New Vue On JavaScript30 series is:

A New Vue On JavaScript30 - 06 Type Ahead

Dave Follett ・ Nov 2 '18

#anewvueonjs30 #vue #javascript30 #javascript