vue computed ant watch won't trigger on nested property changes

user_7520496 0
Viewed 198

Computed method triggers if one of the main property,which is declared inside the data(){}

But won't trigger on nested property changes. even I used watch deep.

myApp.component("editfeemodal", {
    props: ['feedetail'],
    data() {
        return {
        }
    },   
    computed: {
        validated: function () {
            try {
                if (this.feedetail.glCode === null || this.feedetail.glCode === "" || typeof this.feedetail.glCode == 'undefined')
                    return false;
                return true;

            } catch (e) {
                alert(e);
            }
        }
    },
    watch: {
        feedetail: {
            handler(newValue, oldValue) {
                this.validFee = false;
            },
            deep: true
        },
    },
    methods: {
        "saveFeeDetails": function () {}
    },
    template:'
     <select v-model="feedetail.glCode" class="form-select" v-bind:class="[feedetail.glCode=='' ?'is-invalid':'']" id="inputGroupSelectGLCode" >
        <option value="" selected>Choose...</option>
        <option value="1000">1000</option>
        <option value="2000">2000</option>
        <option value="3000">3000</option>
       </select>
    '
    })

Does any one knows why and how to sort this out,please?

Regards

vue.js
2 Answers
user_102975940

When comparing objects, you are actually comparing a reference to that object, hence modifying a value within it will not trigger the watch event.

You will need to use a "deep watch" to target the specific value that will be changing.

watch: {
    searchText: {
        handle(newValue, oldValue) {
            this.result = newValue.text
        },
        deep: true
    }
}

Or, more shortly:

watch: {
    'searchText.text': function(newValue, oldValue) {
        this.resule = newValue
    }
}

For a more complete example, here's a working CodeSandbox project based on your code.

From the Vue docs: vm.$watch

When mutating (rather than replacing) an Object or an Array, the old value will be the same as new value because they reference the same Object/Array. Vue doesn’t keep a copy of the pre-mutate value.

user_9790520
Related