Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Use Vue.js Watchers to Respond to Async Updates

    Greg ThomanGreg Thoman

    Use watchers to keep an eye on your data. Watchers are methods that are invoked when the specified attribute changes. They are useful when you want to perform asynchronous operations in response to changing data.

    vueVue.js
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 Here's a form that, when submitted, adds a new dinosaur to a list. Alongside our data block, let's add a new block called watch. We already have our input field bound to the attribute input. Let's watch that value by naming our watcher input.

    00:15 Watchers are functions. We'll debounce this one, and then set this.buttonText to a ternary. If this.input is not empty, let's change the button text to "Add" and whatever the input is. If it is empty, change it back to "Add Dinosaur." Let's debounce this over 250 milliseconds.

    00:33 Now, when the input value changes, our new watcher is invoked, and the button text is changed to reflect it.

    Discuss

    Discuss