How to use wa-dropdown with Vue
So far in our Web Awesome/Vue series, we have covered wa-card and wa-grid. Two years ago, I wrote about building a photography website (that admittedly had a shitty UI). The important part was the GitHub Actions that were triggered when a new photo was added. The script behind that creates versions of the photo file and appends that photo’s data to the JSON and XML files. Those data files let us fetch the years the photos were taken, the countries where the photos were taken, the years I took photos in each country, and the countries where I took photos for each year. In this post, we will look at how to create a Web Awesome dropdown menu, how to use those values to drive it, and ultimately, how to have both a “years” dropdown and a “countries” dropdown that affect each other.
Web Awesome’s wa-dropdown component is pretty easy to drive from a computed property. Let’s start by populating a dropdown with years from 2018 through the current year.
CodePen Embed Fallback
You don’t need a computed property to populate your dropdown element, though. You can also populate it from a normal array.
CodePen Embed Fallback
In this second example, we are using static values to populate a “Countries” dropdown. I want both a “Years” dropdown and a “Countries” dropdown in the finished project. Let’s see what that would look like next.
CodePen Embed Fallback
Like the first two examples, the third one also has the years as a computed property and the countries as a static array of strings.
If we are going to use this as a display filter for photos, I’m not a prolific enough traveler to have photos from every country every year, and we want to avoid a “no photos found” result, we will need to make one dropdown affect the other. If the user selects “Italy” and I was only in Italy in 2022, it wouldn’t make sense to allow the user to select 2023. In a similar vein, if the user selects 2024 and I was only in Japan, South Korea, and Taiwan in 2024, it wouldn’t make sense to allow them to select Italy.
So, what would that look like?
CodePen Embed Fallback
In this final example, once the user selects a year, the available countries are constrained; once a country is selected, the available years are constrained. There are refs for selectedYear and selectedCountry, enabling a future version where cards display the resulting photos.
First example: https://codepen.io/steinbring/pen/xbOGPBP/ac9a54f9138ab18b67f1dbe6857a0774
Second example: https://codepen.io/steinbring/pen/OPXVzLe/bc980fc7c7c361338016dced1eb78db4
Third example: https://codepen.io/steinbring/pen/emzNypR/91c65d642cd2cbce0fbe81a847ad6fc7
Fourth example: https://codepen.io/steinbring/pen/JoKdMRZ/4215aaa4233159d617233f1084e7c069
Fifth example: https://codepen.io/steinbring/pen/PwzqEpo/192ca335ef8aaff25ca960acf1ee3809
Sixth example: https://codepen.io/steinbring/pen/XJKbQBE/eb43f6c03098dc29b86ee6cfa5e4d890
Seventh example: https://codepen.io/steinbring/pen/XJKbQoY/7892f05989247885434ff3f7e74372f5
Eighth example: https://codepen.io/steinbring/pen/ByzoWWB/f935c8c6b6ad52e1d991a386b5b57a04
#VueJs #WebAwesome
