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.
Solution: Better usability and animation - Vue.js Tutorial
From the course: Vue.js 2 for Web Designers
Solution: Better usability and animation
- [Instructor] Let's take a look at my solution to this usability and animation challenge. So here I've filtered just for the interns and I just wanted to prove to you, in case you didn't try it yourself that the reset button, if we don't hook it up to view, doesn't work. It does clear the values, but it doesn't update the data. So we need to do a little more work here. Here in my directory.js, I'll go down to this reset button. What I need to do is add a method that will fire when this is clicked. I called my method reset filters. It's defined down here. I'm resetting all the search keys to their default values, and then I'm just firing notify filter update. I could also just fire the custom event myself, but since I already have a helper function that does it, I'm calling the helper function. So let's switch back to the browser and make sure that it works. Refresh. Filter for the interns. Reset, and everybody comes back, great. And for those transitions, down here in my transition…
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
-
-
-