“Vue” to the World with Workbar’s Engineers
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!
First, let’s open an HTML file and bring in Vue.js in a
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
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.
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.