The usage of the watch of Vue

Source: Internet
Author: User

I've been working on a H5 project recently. The requirement is that the login button can be clicked only after the user has entered the phone number and the verification code.
Before using Vue, we may be judged by the change event for input, whether the user has entered the content and then modified the button's state. Now with the Vue, it is easy to save a lot, we only need in the watch, listening to the value of the data model changes can be.

<div id= "App" class= "Login_area" >
    <div class= "Form_line" >
        <label> two times password:</label>
        <input v-model= "passw2" placeholder= "Please enter password again"/>
    </div>
</div>
data: {
    PASSW2: ",  //second input password
},
watch: {
    passw2:function (curval,oldval) {
        console.log (curval);
    } ,
},

But what if the listener is an object.
A deep property is described in the Vue-watch document.

discover changes in object intrinsic values . So how do you actually do it.

<div id= "App" class= "Login_area" >
    <div class= "Form_line" >
        <label> User name:</label>
        <input v-model= "info.name" placeholder= "Please enter user name"/>
    </div>
    <div class= "Form_line" >
        <label> password:</label>
        <input v-model= "INFO.PASSW" placeholder= "Please enter password"/>
    </div>
</div>
var app = new Vue {
    el: ' #app ',
    data: {
        info: {
            name: ',//username
            PASSW: ' Password
        },
    },
    Watch: {
        info: {  //The change in the listening object value is different from the above.
            Handler (curval,oldval) {
                console.log (curval);
            },
            deep:true,} 
        ,
    },
})

About watch this is really useful in real-world projects, we should note that there are some differences in listening to properties and objects. This was also when I needed to listen to the object when I was crazy. I can't always write this:

Info.name:function (curval,oldval) {
    console.log (curval);
},

Later, after reading the document, I knew there was a deep option.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.