A New Vue On JavaScript30 - 05 Flex Panel Gallery
Tags: anewvueonjs30, vue, javascript30, javascript
Published: 2018-10-10 16:01:47

---
title: A New Vue On JavaScript30 - 05 Flex Panel Gallery
published: true
tags: ANewVueOnJS30,Vue,JavaScript30,JavaScript
canonical_url: https://davefollett.io/2018/10/09/a-new-vue-on-javascript30-05-flex-panel-gallery/
cover_image: https://davefollett.io/2018/10/09/a-new-vue-on-javascript30-05-flex-panel-gallery/cover-flex-panel-gallery.jpg
series: A New Vue On JavaScript30
---


This article is part of the [A New Vue On JavaScript30](/t/anewvueonjs30) series that explores re-implementing Wes Bos’s ([@wesbos](https://twitter.com/wesbos)) [#JavaScript30](https://JavaScript30.com) projects using [Vue](https://vuejs.org). 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](https://davefollett.io/2018/10/09/a-new-vue-on-javascript30-05-flex-panel-gallery/js30-flex-panel-gallery.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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array), 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](https://github.com/davefollett/JavaScript30/blob/master/00%20-%20Getting%20Started/index-VUE.html) from my [getting started](/davefollett/a-new-vue-on-javascript30---getting-started-4o61) 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](https://davefollett.io/2018/10/09/a-new-vue-on-javascript30-05-flex-panel-gallery/js30-to-vue-locations.gif)

- 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](/davefollett/a-new-vue-on-javascript30---01-javascript-drum-kit-1k7f) project. First, take the repetitive HTML sections and convert them into an array of objects.

{% gist https://gist.github.com/davefollett/913859d14dc427e6609f87fcf19b149e %}

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

{% gist https://gist.github.com/davefollett/782c8cff873c9a97ede313a872e6bf87 %}

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

{% codesandbox yvyqm83lnz initialpath=05%20-%20Flex%20Panel%20Gallery%2Findex-VUE.html module=%2F05%20-%20Flex%20Panel%20Gallery%2Findex-VUE.html %}

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](/davefollett/a-new-vue-on-javascript30---01-javascript-drum-kit-1k7f) 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](https://github.com/davefollett/JavaScript30/blob/master/05%20-%20Flex%20Panel%20Gallery/index-FINISHED.html)
- [A New Vue On JavaScript30’s 05 - Flex Panel Gallery](https://github.com/davefollett/JavaScript30/blob/master/05%20-%20Flex%20Panel%20Gallery/index-VUE.html)

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](https://github.com/davefollett/JavaScript30) of the official [#JavaScript30 GitHub repository](https://github.com/wesbos/JavaScript30) which is located at:

- [https://github.com/davefollett/JavaScript30](https://github.com/davefollett/JavaScript30)

## 🔜 Up Next

Next in the [A New Vue On JavaScript30](/t/anewvueonjs30) series is:

{% link /davefollett/a-new-vue-on-javascript30---06-type-ahead-5760 %}