by @CodingExample

How to Listen for props change in Vue.js

Home » vue » How to Listen for props change in Vue.js

In Vue.js, we have watchers which helps us to listen for a props change and runs a function which contains the new value and old value passed to the prop.

This below example shows you how to properly watch for the prop changes in vue.js.

<template>
  <div id="app">
     <Welcome :msg="text"/>
     <button @click="text='Opps'">Change TEXT</button>
  </div>
</template>

<script>
import Welcome from "./components/Welcome.vue";

export default {
  data(){
    return {
      text: "Hello"
    };
  },
  watch: {
    "text": function(val, oldVal) {      console.log("new: %s, old: %s", val, oldVal);
    }
  },
  components: {
    Welcome
  }
};
</script>