This course has been updated! We now recommend you take the Introduction to Vue 3 course.
Transcript from the "Challenge 2: Solution" Lesson
[00:00:00]
>> Sarah Drasner: All right, so we've got our method and we've got our computed. Let's take a look at our solution over here. So, what you should have had we already have our selected posts and things are already filled out. Then, in our methods we have ad post. We're establishing a relationship in this new object between author, title and label with this.newAuthor, this.newTitle, this.newLabel.
[00:00:27] You can c an call them whatever you want to. Those are things that I like to call them. We have this top post which was an empty string. We have this stop post which was, sorry, an array, that top array. And we're pushing this new object that we created with all of that information onto that.
[00:00:48] And then emptying out all of those things, so we're giving them empty strings again. And so that's how we are submitting that post. If we go look at the post in the HTML, we have form @submit.prevent. Remember I mentioned that we're not submitting on that button click. We're submitting on the form itself and we're preventing it from refreshing the page with that .prevent modifier.
[00:01:12] And we have addPost here, you could've called that whatever you want in the methods there. So moving on to the computed value, we have computed filteredByLabel. It's very similar to the other filter that we created, where we have that regex that's making sure that that capitalization isn't gonna be a problem.
[00:01:30] And then we're returning this.posts, remember, that establishes a relationship with this posts here. So we have this this.post.filter and then, we're matching to the filter that we created. Then, if we go over to the computed, over into the HTML, we have this select, and we have vmodel selected.
[00:01:54] So that stays pretty much the same, and we have a disabled value. But then what changes here is instead of going postThroughPost, we're going postFilteredByLabel or whatever you decided to call it in that area. So that is the same name as that filteredByLabel, and it's filteredByLabel here as well.