From the course: Vue.js 2 for Web Designers

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Solution: Better usability and animation

Solution: Better usability and animation - Vue.js Tutorial

From the course: Vue.js 2 for Web Designers

Start my 1-month free trial

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…

Contents