vue computed ant watch 不会触发嵌套属性更改

Question

如果主要属性之一在数据 () 中声明，计算方法将触发{}

但不会触发嵌套的属性更改。连我都用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>
    '
    })

有谁知道为什么以及如何解决这个问题吗？

此致

Answer 1

watch默认是shallow，你需要的是deep watch ，请参考https://vuejs.org/guide/essentials/watchers.html#deep-watchers

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

Answer 2

当比较对象时，您实际上是在比较对该对象的引用，因此修改其中的值不会触发监视事件。

您将需要使用“深度监视”来定位将要更改的特定值。

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

或者，更简短地说：

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

有关更完整的示例，这里有一个基于您的代码的 working CodeSandbox project。

来自 Vue 文档：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.

vue computed ant watch 不会触发嵌套属性更改

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

vue.js

vue computed ant watch 不会触发嵌套 属性 更改

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

vue.js

vue computed ant watch 不会触发嵌套属性更改