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.
Wire up the filters form - Vue.js Tutorial
From the course: Vue.js 2 for Web Designers
Wire up the filters form
- [Instructor] In this video, we're going to wire up the filter form fields, so they track the current values and look at an available modifier for v-bind. So I need to set up these form fields so they're going to track the data. And I want to note that between the end of the last video and this one, I reformatted this template, so it uses the backslash notation instead of the ES6 template literal, so I won't leave any IE users behind. Anyway, what we need to do is get the values of these fields into our data object up here. So I need a name, a job title, and a flag to track whether this person is an intern, so we're going to add those to our data object, and I'm going to put them all in a single object called search just so I can put them all together. I could have personName, job title, and so forth, but I think it's cleaner to just put it all in one object. So inside that, we'll have a name, which will start out as blank, a title, which will also start out as empty, and then intern…
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
-
-
-