Introduction to Vue.js

Introduction to Vue.js Challenge 2: Updating a Blog


This course has been updated! We now recommend you take the Introduction to Vue 3 course.

Check out a free preview of the full Introduction to Vue.js course:
The "Challenge 2: Updating a Blog" Lesson is part of the full, Introduction to Vue.js course featured in this preview video. Here's what you'd learn in this lesson:

In this challenge, students create a new blog post with a label. Then add filtering functionality to sort blog posts by labels.

Get Unlimited Access Now

Transcript from the "Challenge 2: Updating a Blog" Lesson

>> Sarah Drasner: All right, it's exercise time. I made a list of these blog posts, and in these blog posts they each have a label. So we've got science, and math, and all sorts of stuff. I want you to make a little form that adds a new post. So the title, the author, I spelled Mark's name wrong, I was trying to troll him and it went horribly wrong.

[00:00:22] [LAUGH] And we're gonna add a label here and then we'll add a new blog post. And then we wanna filter with a label all of these blog posts. So if we go to Math, you can actually see that thingy, Mark Grabinski at the bottom there. So you're gonna use a method for the form, and you're going to use a computed property for filtering.

[00:00:44] And here is the code pen that you're working off of. I think I have to make, set this to public as well. So you might need a refresh before you can get in but this is your starting point. You have, all of the data is already there for you so you don't have to make up a bunch of blog posts.

[00:01:04] We've got new title, new author, new label, all as empty strings. We have a form, I actually helped you out this time and put select in options and all of those input values so that you're not having to duplicate the stuff that we already went over. And then we have this select v-model selected here, so yeah.