代码之家 › 专栏 › 技术社区 › steros

如何观察多个值或数据的一般变化

vue-component vuejs2 vue.js

1

steros · 技术社区 · 7 年前

我有一个组件。如您所见,我正在监视更改,然后运行update函数通过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
            }
        });
    },

1 回复 | 直到 7 年前

1

3

Sumurai8 7 年前

装配 treshold_value minimal_margin_fixed_value 和 value_percentage payload . 这个有效负载就是您发送给api的内容。由于计算属性的工作方式,计算属性监视它所依赖的变量。如果它们改变,有效负载也会改变,因此会调用观察者。看这个新的 有效载荷

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
        });
    },
}