Scribd Logo
Upload

Welcome to Scribd!

  • 19 views

    Vue - Js Watch Property: Help Others, Please Share

    Uploaded by

    Arjun Gautam
    The document discusses the Vue.js watch property, which allows developers to listen for changes to component data and run functions in response. It provides an example using a watch property to sync textbox values for kilometers and meters. Computed properties are introduced as an alternative that is less repetitive for cases where data needs to change based on other data.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Vue - Js Watch Property: Help Others, Please Share

    Uploaded by

    Arjun Gautam
    19 views1 page
    The document discusses the Vue.js watch property, which allows developers to listen for changes to component data and run functions in response. It provides an example using a watch property to sync textbox values for kilometers and meters. Computed properties are introduced as an alternative that is less repetitive for cases where data needs to change based on other data.

    Original Description:

    Original Title

    javatpoint_com_vue_js_watch_property.pdf

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses the Vue.js watch property, which allows developers to listen for changes to component data and run functions in response. It provides an example using a watch property to sync textbox values for kilometers and meters. Computed properties are introduced as an alternative that is less repetitive for cases where data needs to change based on other data.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    19 views1 page

    Vue - Js Watch Property: Help Others, Please Share

    Uploaded by

    Arjun Gautam
    The document discusses the Vue.js watch property, which allows developers to listen for changes to component data and run functions in response. It provides an example using a watch property to sync textbox values for kilometers and meters. Computed properties are introduced as an alternative that is less repetitive for cases where data needs to change based on other data.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 1

    Home Java Vue.

    js JavaScript HTML CSS

    Vue.js Watch Property


    The Vue.js Watcher or watch property allows the
    developers to listen to the component data and run
    whenever they change a particular property. The
    watcher or watch property is a unique Vue.js feature
    that lets you keep an eye on one property of the
    component state and run a function when that
    property value changes.

    Let's take an example to see and learn about the


    Watch property in VueJS. See the following examples
    to understand the concept of watcher or watch
    property.

    Index.html file:

    <html>

    <head>

    <title>Vue.js Watch Property</title>

    <link rel="stylesheet" href="index.css">

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vu

    </script>

    </head>

    <body>

    <div id = "wat_pro">

    Kilometers : <input type = "text" v-

    modelMeters
    = "kilometers"><br/>
    : <input type = "text" v-

    model = "meters">
    </div>

    <script src="index.js"></script>

    </body>

    </html>

    Index.js file:

    var vm = new Vue({

    el: '#wat_pro',

    data: {

    kilometers : 0,

    meters:0

    },

    methods: {

    },

    computed :{

    },

    watch : {

    kilometers:function(val) {

    this.kilometers = val;

    this.meters = val * 1000;

    },

    meters : function (val) {

    this.kilometers = val/ 1000;

    this.meters = val;

    })

    Let's use a simple CSS file to make the output more


    attractive.

    Index.css file:

    html, body {

    margin: 5px;

    padding: 0;

    After the execution of the program, you will see the


    following output:

    Output:

    You can see that the output has the 0 entry in its
    textboxes. If you enter some values in the kilometers
    textbox you can see the changes in the meters
    textbox and vice-versa. Let's enter 50 in kilometers
    textbox and see the result.

    Output:

    Now, enter some value in the meter textbox and see


    the changes in the kilometers textbox. Let's enter 5 in
    the meter textbox and see the result in the output.

    Output:

    Example Explanation

    In the above example, we have created two


    textboxes, one with kilometers and another with
    meters. We have initialized both textboxes the
    kilometers and meters to 0 in the data property. Here,
    we have created a watch object created with two
    functions kilometers and meters. In both the
    functions, the conversion from kilometers to meters
    and from meters to kilometers is done.

    When you enter values inside any of the textboxes,


    whichever is changed, the Watch property takes care
    of updating both the textboxes. You do not have to
    assign any events or wait for it to change and do the
    extra work of validating. The watch property takes
    care of updating the textboxes with the calculation
    done in the respective functions.

    Vue.js Computed vs. Watched Property

    If you compare Vue.js computed property with Vue.js


    watch property, then the Vue.js watch property
    provides a more generic way to observe and react to
    data changes.

    If you have some data that you need to change


    based on some other data, it is easy and
    straightforward to use watch property, especially if
    you are coming from an AngularJS background. But,
    it is a better idea to use a computed property rather
    than an imperative watch callback.

    Let's take an example and see and compare it with


    both watch property and computed property.

    Index.html file:

    <html>

    <head>

    <title>Vue.js Watch Property</title>

    <link rel="stylesheet" href="index.css">

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vu

    </script>

    </head>

    <body>

    <div id="eg_1">{{ fullName }}</div>

    <script src="index.js"></script>

    </body>

    </html>

    Index.js file:

    var vm = new Vue({

    el: '#eg_1',

    data: {

    firstName: 'Alex',

    lastName: 'Panda',

    fullName: 'Alex Panda'

    },

    watch: {

    firstName: function (val) {

    this.fullName = val + ' ' + this.lastName

    },

    lastName: function (val) {

    thisthis.fullName = this.firstName + ' ' + val

    })

    Output:

    You can see that the above code is imperative and


    repetitive. Now, let's compare it with a computed
    property example:

    Index.html file:

    <html>

    <head>

    <title>Vue.js Computed Property</title>

    <link rel="stylesheet" href="index.css">

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vu

    </script>

    </head>

    <body>

    <div id="eg_2">{{ fullName }}</div>

    <script src="index.js"></script>

    </body>

    </html>

    Index.js file:

    var vm = new Vue({

    el: '#eg_2',

    data: {

    firstName: 'Alex',

    lastName: 'Panda'

    },

    computed: {

    fullName: function () {

    return this.firstName + ' ' + this.lastName

    })

    Output:

    You can see that both examples give the same result,
    but the second one, "computer property" example is
    much better and concise.

    ← prev next →

    For Videos Join Our Youtube


    Channel: Join Now

    Help Others, Please Share

    Learn Latest Tutorials

    Solr MongoDB

    Gimp Verilog

    Teradata PhoneGap

    Gmail Vue.js

    PLC Illustrator

    Postman

    Preparation

    Aptitude Reasoning

    Verbal A. Interview

    Company

    Trending Technologies

    AI AWS

    Selenium Cloud

    Hadoop ReactJS

    D. Science Angular 7

    Blockchain Git

    ML DevOps

    B.Tech / MCA

    DBMS DS

    DAA OS

    C. Network Compiler D.

    COA D. Math.

    E. Hacking C. Graphics

    Software E. Web Tech.

    Cyber Sec. Automata

    C C++

    Java .Net

    Python Programs

    Control S. Data Mining

    You might also like