Watch failure in vue

data has
clipboard.png

watchform
clipboard.png

this.form.cat_id=1_7eb3340579783ab51bf7e110f7a4f397this.formwatch

clipboard.png

this.$set(this.form,"cat_id","1_7eb3340579783ab51bf7e110f7a4f397"),this.formwatch

clipboard.png

what I don"t understand even more is to use this.form.xx=yy to modify other values, and the function is normal. What is the reason for this

< hr >

I found a pattern

form.cat_id in data , this.form.cat_id= "xxx" does not trigger watch
form.cat_id in data , this.form.cat_id= "xxx" triggers watch
form.p in data

Front-end vue.js
Mar.09,2021

this will take effect 

watch:{
    'form.cat_id': function (newValue, oldValue) {
        ...
    }
}

I have typed it according to you, and the modification of p Q cat_id will take effect. Take a look at 

data(){
    return {
        form:{
            p:1,
            q:64,
            cat_id:'',
        }
    }
},
watch:{
    form:{
        handler(newValue, oldValue) {
            console.log("---nnn---")
        },
        deep: true
    }
},
mounted: function () { 
    setTimeout(()=>{
        this.form.cat_id="xxx"
        // this.form.q=2
    },2000)
}

I tested it, and the first form on my side is also OK;

first screenshot:
obviously p and Q attributes should be watch , because there are corresponding get and set methods below, but there is no get and set methods in cat_id , that is, the cat_id in your form . So using this.form.cat_id =. is a new attribute and cannot be watch . The new attribute can only be watch in the form of this.$set .

because Q and p both have get and set methods, that should be normal watch , so there is no problem with that modification.
have you deleted the cat_id attribute somewhere?

watch has a deep attribute, you can try

Previous: The problem of css in the middle?

Next: Win10 git ssh configuration

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu