Vue.js Watch | Working of Watch Property in Vue.js with Examples

42
Vue.js Watch | Working of Watch Property in Vue.js with Examples

Vue.js Watch | Working of Watch Property in Vue.js with Examples

Introduction to Vue.js Watch

The following article provides an outline for Vue.js Watch. Vue.js is an easy-to-use web application framework that can be used to develop great interactive front-end applications. Whenever there is any change in a particular property, a Vue watcher helps one to understand the component data. Vue.js has a special feature, i.e. Watcher, which helps one to keep track of a property of the component state and a function is run when the value of property changes. Watcher makes a code very simple and fast as it takes care of any change in data.

Syntax:

export default {
watch: {
name: function() {
console.log(this.name)
}
}
}

Working of Watch Property in Vue.js

  • Watchers are used to seeing the changes in the data occurring in the reactive properties.
  • It also supports different asynchronous options with the changing value.
  • The syntax written above is used for using Vue.js watch in our application.
  • There are many hooks provided to observe the properties in Vue.js.
  • For adding some functionalities with the change, we can add a watch and apply different logics with the changing value.

Examples

Different examples are mentioned below:

Example #1

Vue.js Watch with Button to change the text.

In the example below, the “Change the Content” button is used to change the content displayed at the bottom of the output screen. The text that appears at the bottom of the output screen changes randomly by pressing the “Change the Content” button.

The files used to implement the code below are:

Vue.js watch 1

a. favicon.ico

V

b. index.html

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>Application</title>
</head>
<body>
<noscript>
<strong>Application doesn't work, kindly enable Codesandbox</strong>
</noscript>
<div id="app"></div>
</body>
</html>

c. EDUCBA.png

The image’s link is stated below:

https://cdn.educba.com/images/website_logo_transparent_background_white.png

Vue.js watch 3

d. HelloWorld.vue

Code:

<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h3></h3>
<ul>
<li>
<a
href="https://www.educba.com/"
target="_blank"
rel="noopener"
>Website</a>
</li>
<li>
<a
href="https://www.educba.com/blog/?source=menu"
target="_blank"
rel="noopener"
>Blogs</a>
</li>
</ul>
<h3>Important Links</h3>
<ul>
<li>
<a href="https://www.educba.com/tutorials/?source=menu" target="_blank" rel="noopener">Free Tutorials</a>
</li>
<li>
<a href="https://www.educba.com/courses/?source=menu" target="_blank" rel="noopener">Certification Courses</a>
</li>
<li>
<a href="https://www.educba.com/corporate/?source=footer" target="_blank" rel="noopener">Corporate Training</a>
</li>
</ul>
<h3>Know More About us</h3>
<ul>
<li>
<a href="https://www.educba.com/about-us/?source=footer" target="_blank" rel="noopener">About Us</a>
</li>
<li>
<a href="https://www.educba.com/signup/?source=footer" target="_blank" rel="noopener">SignUp</a>
</li>
<li>
<a
href="https://www.educba.com/contact-us/?source=footer"
target="_blank"
rel="noopener"
>Contact Us</a>
</li>
<li>
<a href="https://www.educba.com/terms-and-conditions/?source=footer" target="_blank" rel="noopener">T&C</a>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String
}
};
</script>
<style scoped>
h3 {
margin: 60px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #2d43e3;
}
</style>

e. App.vue

Code:

<template>
<div id="app">
<input type="button" v-on:click="changeQuote" value="Change the Content">
<img width="25%" src="./assets/EDUCBA.png">
<HelloWorld msg="Welcome to EduCBA" />
<p>{{quote}}</p>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default {
name: "App",
components: {
HelloWorld
},
data: function() {
return {
quotes: [
"Hello! Welcome to EDUCBA.",
"EDUCBA is the best place for Upskillment",
"For assistance, Connect to our Counselors"
],
quote: ""
};
},
methods: {
changeQuote() {
this.quote = this.quotes[Math.floor(Math.random() * this.quotes.length)];
}
},
watch: {
quote(oldValue, newValue) {
console.log("Change  "
+ oldValue
+ " vers "
+ newValue);
}
}
};
</script>
<style>
#app {
font-family: 'Times New Roman'
, Times
, serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #b02558;
margin-top: 20px;
background-color: #85d12e;
}
</style>

f. main.js

Code:

import Vue from "vue";
import App from "./App.vue";
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");

Output:

Vue.js watch 4

Vue.js watch 5

Vue.js watch 6

Vue.js watch 7

Example #2

Drag the mouse and Change the value of the box.

In the example below, the rectangle location changes along the x-axis with the movement of the mouse.

The files used to implement the code below are:

Vue.js watch 8

a. EDUCBA.png

The image’s link is stated below:

https://cdn.educba.com/images/website_logo_transparent_background_white.png

EDUCBA

b. Annotator.vue

Code:

<template>
<svg :width="w" :height="h">
<foreignObject x="0" y="0" :width="w" :height="h">
<slot></slot>
</foreignObject>
<slot name="annotation"></slot>
</svg>
</template>
<script>
export default {
props: {
width: Number,
height: Number
},
data () {
return {
w: this.width,
h: this.height
}
},
mounted () {
this.w = this.$slots.default[0].elm.width || this.width
this.h = this.$slots.default[0].elm.height || this.height
let currentX = this.$slots.annotation[0].data.attrs.x
this.$el.addEventListener("mousemove", evt => {
this.$slots.annotation[0].elm.setAttribute('x', evt.clientX)
})
}
}
</script>
<style >
</style>

c. App.vue

Code:

<template>
<div id= 'app'>
<annotations>
<rect :x="x" class="box" slot="annotation" y="1" width="150" height="90" ></rect>
<img src="./assets/EDUCBA.png" />
</annotations>
<p>With Mouse, Rectangle will move along x-axis.</p>
</div>
</template>
<script>
import Annotator from './components/Annotator'
export default {
components: {
'annotations': Annotator
},
data () {
return {
x: 1
}
},
watch: {
x (val) {
console.log(val)
}
}
}
</script>
<style scoped>
.box {
fill: #de2a8a;
}
.box:hover {
fill: #f7f72a;
}
#app{
background-color: #85d12e;
}
</style>

d. index.html

<div id="app"></div>

e. index.js

import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
console.log('Vue version: ' + Vue.version)

Output:

Vue.js watch 10

On full screen, the output will seem as the below image.

Vue.js watch 11

Example #3

Vue.js Watch usage with Counter.

In the example below, the value of the counter changes when the “You clicked here _ times” button is clicked, and also one can see the change in value when the “Rupees Spent” or “Points Earned” value is entered.

The files used to implement the code below are:

files

a. EDUCBA.png

The image’s link is stated below:

https://cdn.educba.com/images/website_logo_transparent_background_white.png

EDUCBA

b. HelloWorld.vue

Code:

<template>
<div class="hello">
<h1>{{ msg }}</h1>
<div>{{ text }}</div>
<br>
<div>{{ message }}</div>
<br>
<div>{{ reversedMessage }}</div>
<br>
<button-counter></button-counter>
<div id="computed_props" class="input-container">
Rupees Spent:
<input type="text" v-model="kilometers">
</div>
<div id="computed_props" class="input-container">
Points Earned :
<input type="text" v-model="meters">
</div>
</div>
</template>
<script>
import Vue from "vue";
export default {
name: "HelloWorld",
props: {
msg: String
},
data() {
return {
text: "Mixins are cool",
message: "",
kilometers: 0,
meters: 0
};
},
mounted() {
this.text = "Two";
this.$nextTick(() => {
this.text = "Track Earned Points!";
});
},
computed: {
reversedMessage: function() {
return this.message
.split("")
.reverse()
.join("");
}
},
watch: {
kilometers: function(val) {
this.kilometers = val;
this.meters = val * 100;
},
meters: function(val) {
this.kilometers = val / 100;
this.meters = val;
}
}
};
Vue.component("button-counter", {
data: function() {
return {
count: 0
};
},
template:
'<button v-on:click="count++"> {{ count }} Times, You Clicked.</button>'
});
</script>
<style scoped>
h3 {
margin: 35px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 11px;
}
a {
color:#e03a69;
}
.input-container {
display: inline-block;
width: 100%;
margin-bottom: 25px;
margin-top: 1px;
}
</style>

c. App.vue

Code:

<template>
<div id="app">
<img width="25%" src="./assets/EDUCBA.png">
<HelloWorld msg="Heyoo! Welcome to Point Checker"/>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default {
name: "App",
components: {
HelloWorld
}
};
</script>
<style>
#app {
font-family: 'Times New Roman'
, Times
, serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #769cc2;
margin-top: 1px;
background-color: #2c3e50;
}
</style>

d. main.js

Code:

import Vue from "vue";
import App from "./App.vue";
Vue.config.productionTip = false;
export const myMixin = {
data() {
return {
title: "Mixins are cool",
copyright: "All rights reserved. Product of super awesome people"
};
},
created: function() {
this.greetings();
},
methods: {
greetings: function() {
console.log("Howdy my good fellow!" + this.title);
}
}
};
new Vue({
mixins: [myMixin],
render: h => h(App)
}).$mount("#app");

Output:

0 Times You Clicked

Vue.js watch 15

1 Times You clicked

Conclusion

On the basis of the above article, we saw the concept of the watch in Vue.js. We saw when and why we should use the watch in Vue.js. The examples will help us in understanding the application of watch in Vue.js and how it can be used in different situations and logics.

Recommended Articles

This is a guide to Vue.js Watch. Here we discuss the introduction, working of watch property in Vue.js and examples, respectively. You may also have a look at the following articles to learn more –

  1. Javascript Sum Array
  2. JavaScript Absolute Value
  3. JavaScript z-index
  4. JavaScript Counter

The post Vue.js Watch appeared first on EDUCBA.

Source link

Founder OF Postintrend.com started my blogging journey in 2015 In This Duration I learned more about blogging, SEO, SEM, Affiliate marketing and more kinds of stuff on the Internet. I love to share my information with everyone.