From the course: Vue.js 2 for Web Designers
Unlock the full course today
Join today to access over 22,400 courses taught by industry experts or purchase this course individually.
Build the filters form - Vue.js Tutorial
From the course: Vue.js 2 for Web Designers
Build the filters form
- [Male Narrator] In this video we're going to build out the template for the filters component. Where we'll see how the component data is a little bit different from the data in the root instance. So right here I have my empty form, so I'm going to steal some mark up from the mock-up. Put it in here and do some reformatting. I'm just going to group all these fields into a single one, and there's not a lot to do with any individual form field here. As your forms get larger you might consider breaking them up into some child components, we don't really need to do that here. So back here in my editor I'm going to be swapping out this template. So let's switch over here to this mock-up dot html. Going to jump down with Ctrl + g to line 122. It looks good, I'm just going to steal all the mark up that defines this form. Now switch back to directory dot js. We're going to do this template a little differently than we did the previous one. I'm going to use a ES6 feature called template…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
Make a plan2m 26s
-
Scaffold initial components5m 18s
-
Pass component data with props6m 4s
-
Build the filters form5m 13s
-
Wire up the filters form4m
-
Respond to filter form updates3m 7s
-
Handle custom filter event3m 29s
-
Animating with transition-group6m 28s
-
Challenge: Better usability and animation1m 30s
-
Solution: Better usability and animation1m 39s
-
-
-