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"  v-bind: 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

CodePudding user response：

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.

CodePudding user response：

Watch is shallow by default, what you need is deep watch , please refer to https://vuejs.org/guide/essentials/watchers.html#deep-watchers

computed:{
    searchText{
      deep: true,
      handle() {
        return this.searchText.id;
      }
    }
}