[Vue] Use Vue.js Watchers to Respond to Async Updates

Posted 2020-08-28 Answer1215

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.

 

<template>

    <section class="container">
        <item-description></item-description>
        <h1 class="title">
            {{message | capitalize}}
        </h1>
        <button @click="changeMessage" class="button">Change Message</button>
        <hr>
        <section>
            <h2>Mouse event</h2>
            <div>{{counter}}</div>
            <div @mouseover="inc">Mouse over here to change counter</div>
        </section>
        <section>
            <h2>Keyboard events</h2>
            <form @submit.prevent="submit">
                <input type="text"
                       v-model="firstName"
                       @keyup.enter="submit"
                       @keyup.alt.ctrl.shift.down="keyeventHandler"/>
                <button v-bind:disabled="buttonDisabled">{{buttonText}}</button>
            </form>
            <div>
                {{key}}
            </div>
        </section>
    </section>
</template>

<style scoped>
.title
{
  margin: 50px 0;
}

</style>

<script>

  import ItemDescription from ‘../components/item-description‘;

  export default {
    data() {
      return {
        message: ‘this is my vue!‘,
        counter: 0,
        key: "",
        firstName: "",
        buttonText: "Add"
      }
    },

      computed: {
        buttonDisabled: function() {
          return this.firstName == "";
        }
      },
      watch: {
        firstName: function(){
          this.buttonText = this.firstName !== "" ? "Add " + this.firstName : "Add Dinosaur";
        }
      },

    components: {
        ItemDescription
    },

    filters: {
        capitalize(value) {
            return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase();
        }
    },

    methods: {
      changeMessage() {
        this.message = "Updated message here!"
      },

      inc() {
        this.counter += 1;
      },

      keyeventHandler() {
        this.key = "Ctrl + alt + shift + down is clicked"
      },

      submit() {
        console.log("form is submitted, the value is", this.firstName);
      }
    }
  }

</script>