Question

我在组件中有这个。如您所见，我正在监视更改，然后运行更新功能以通过api调用更新数据库。有没有一种方法可以去除重复的代码并只监视一般的数据更改？或结合观察几个值。

watch: {
    mutable_threshold_value: function(val, oldVal) {
        this.update();
    },
    mutable_minimal_margin_fixed_value: function(val, oldVal) {
        this.update();
    },
    mutable_value_percentage: function(val, oldVal) {
        this.update();
    },
},
methods: {
    update: function() {
        this.$http.patch('/api/v1.0/margin-steps/' + this.id, {
            params: {
                threshold_value: this.mutable_threshold_value,
                minimal_margin_fixed_value: this.mutable_minimal_margin_fixed_value,
                value_percentage: this.mutable_value_percentage
            }
        });
    },

Answer 1

将treshold_value，minimal_margin_fixed_value和value_percentage组装到计算的属性payload中。该有效负载就是您发送到api的内容。由于计算属性的工作方式，计算属性监视其依赖的变量。如果它们更改，则有效负载也会更改，因此将调用监视程序。而是观看此新的payload变量，并在有效负载发生变化时将有效负载发送到服务器。

computed: {
    payload () {
        return {
            threshold_value: this.mutable_threshold_value,
            minimal_margin_fixed_value: this.mutable_minimal_margin_fixed_value,
            value_percentage: this.mutable_value_percentage
        }
    }
},
watch: {
    payload () {
        this.update();
    }
},
methods: {
    update: function() {
        this.$http.patch('/api/v1.0/margin-steps/' + this.id, {
            params: this.payload
        });
    },
}

一般如何观察多个值或数据更改

1 个答案: