Workbar's software engineers like Kristin Ruben are the masterminds behind our members' digital user experience. She is the guest author of this post on the Javascript framework Vue.js (which is responsible for some of the new dynamic features of the platform, such as digital on-boarding) and the organizer of the upcoming Vue.js meetup in Workbar Cambridge.
About two months ago, Workbar's engineering team started using Vue.js 2.0 as its JavaScript framework of choice. There was no Boston Vue.js meetup yet, so we decided to create one ourselves. Our inaugural meetup is Tuesday, January 17, 2017, from 6pm to 7:30pm (with food!).
Anyway, while we are very excited by this new addition to our stack, the downside to adopting this shiny new technology is, of course, the dearth of Stack Overflow posts for reference!
To start our Vue.js experiment, we wanted two dropdowns where the scope of the second dropdown was dependent on the selected option in the first. In other words, the selected option in the first dropdown dictated what showed up in the second dropdown. This is a pretty common use case, but we couldn't find a good example of this in Vue.js yet. Going off of one of the examples on the framework's website, we wrote one from scratch. Here's a boiled-down example of what we came up with, which I'll walk through below. Just so you know, this post assumes knowledge of JavaScript and basic familiarity with Vue.js.
First, let's open an HTML file and bring in Vue.js in a script tag:
Next, we'll pop in the first dropdown with our scoping data. For this example, I'll use states in the first dropdown and cities in the second. 
If you're at all familiar with Vue input bindings, you'll know that v-model is used for two-way data bindings; it allows the element to sort of "emit" its data to elements with a corresponding v-bind attribute. In this case, we'll be using a custom component to create the second dropdown, so that v-bind will arrive later. Next, we need to pop the following into a script tag to instantiate our Vue app.
Let's break this down. We are initializing a variable called vueApp to create a new Vue instance. The id of the app is set in the el attribute; I've creatively called it #vue-app. After that comes the initial data. Since the first dropdown is essentially searching through the data and returning a filtered version of itself, I'm going to name the selected state (Massachusetts or New Hampshire) from the first dropdown the searchQuery. It needs to be initialized as an empty string. From there, we can hard-code some data where each "row" represents a city - the data we ultimately want to select in the second dropdown. Now that we've hooked up the first dropdown, we need to create a custom component: a scoped second dropdown select. Add the following to your script tag above the vueApp variable:
This block of code is doing a few things. First, it's registering a custom component and assigning it a template, which we'll get to in a moment. The template is exactly what it sounds like - a block of markup that you can plop into your code the same way you would use any other HTML tags. From there, we need to pass in props. This is because the first dropdown is essentially acting as a parent to our new component and needs to receive information from it. The computed element is where Vue puts any data that is being calculated in a function. For this, we need to "calculate" filtered data for the second dropdown using JavaScript. Finally, let's hop back over to the HTML and 1) make the template for the second dropdown and 2) hook up the second dropdown. The template should look like this:
Essentially, we're doing a for loop on our filteredData: we're making a select option for each city name.
Once that's in there, let's put the filtered-items dropdown in the vue-app under the first select. Here, we'll v-bind the data and searchQuery to the dropdown.
And that's it! We now have a scoped pair of dropdowns.
A graduate of Wellesley College, Kristin worked in politics before attending Launch Academy to become a developer.
About Workbar:
Workbar operates coworking locations throughout greater Boston (Boston Back Bay, Boston South Station, Burlington, Cambridge, Arlington, Brighton, Danvers, Norwood, Salem) and several other partner locations throughout the state. Want to keep up with the world of Workbar? Subscribe to our mailing list for the most up-to-date information about our upcoming events and community news. You can also follow us on Instagram, Facebook, LinkedIn and Twitter.
