Vue.js中的相互依赖属性

Question

我在Vue.js中遇到了一个相互依赖的属性案例，我想知道是否有更聪明的方法来设置它。它是通过设置开始时间（A）和/或结束时间（B）和/或持续时间（Diff）来定义时间跨度的形式 - 这里用整数简化。根据哪些属性更改，将相应地计算其他属性。如果我没有忘记某些规则如下：

• 如果设置了差异，则更改B
• 如果设置了B且A具有先前值
，则更改B和Diff
• 如果设置了B且A没有以前的值
，则更改Diff
• 如果设置了A，则更改Diff
• B如果未设置A但Diff和B具有先前值
，则更改Diff
• B设置A如果未设置A但Diff和B没有先前值
• 如果设置了A，则差异更改B
• 如果未设置A但是B
，则Diff设置A.
• Diff可以是唯一填写的字段

这个想法是：通过改变A来移动跨度​​，通过改变B或Diff来扩展/收缩跨度。根据逻辑计算缺失值。

我使用$watch获得了一个工作脚本：https://jsbin.com/korole/edit?html,js,output

同样，是否有更聪明的方法来设置它？非常感谢您的帮助！

var vm = new Vue({

    el: '#calculate-difference',

    data: {
        a: '',
        b: '',
        diff: ''
    },

    methods: {
        updateProperty: function(prop, val) {
            if (parseInt(this[prop]) !== val) this[prop] = val;
        }
    },

    watch: {

        'a': function(val, old) {
            var newB, newDiff;

            if (val === '') return;

            // A changes B if Diff is set
            if (this.diff !== '') {
                newB = parseInt(val) + parseInt(this.diff);
                this.updateProperty('b', newB);
            }

            // A changes B and Diff if B is set and A had previous value
            else if (old !== '' && this.b !== '') {
                newB = parseInt(this.b) + (parseInt(val) - parseInt(old));
                this.updateProperty('b', newB);
                newDiff = parseInt(this.b) - parseInt(val);
                this.updateProperty('diff', newDiff);
            }

            // A changes Diff if B is set and A didn't have previous value
            else if (this.b !== '') {
                newDiff = parseInt(this.b) - parseInt(val);
                this.updateProperty('diff', newDiff);
            }
        },

        'b': function(val, old) {
            var newDiff;

            if (val === '') return;

            // B changes Diff if A is set
            if (this.a !== '') {
                newDiff = parseInt(val) - parseInt(this.a);
                this.updateProperty('diff', newDiff);
            }

            // B changes Diff if A is not set but Diff and B had previous value
            else if (old !== '' && this.diff !== '') {
                newDiff = parseInt(this.diff) + (parseInt(val) - parseInt(old));
                this.updateProperty('diff', newDiff);
            }

            // B sets A if A is not set but Diff and B didn't have previous value
            else if (this.diff !== '') {
                newA = parseInt(val) - parseInt(this.diff);
                this.updateProperty('a', newA);
            }
        },

        'diff': function(val) {
            var newB, newA;

            if (val === '') return;

            // Diff changes B if A is set
            if (this.a !== '') {
                newB = parseInt(this.a) + parseInt(val);
                this.updateProperty('b', newB);
            }

            // Diff sets A if A is not set but B
            else if (this.b !== '') {
                newA = parseInt(this.b) - parseInt(val);
                this.updateProperty('a', newA);
            }
        }

    }

});

编辑：是的，有一种更聪明的方式。

谢谢你，杰夫！避免$watch，请使用Computed Properties。代码更清晰，更容易掌握。更改B和B更改A.差异计算。

使用计算属性的改进脚本：https://jsbin.com/jixili/edit?html,js,output

var vm = new Vue({

    el: '#calculate-difference',

    data: {
        store: {
            a: '',
            b: '',
            diff: ''
        }
    },

    computed: {
        a: {
            get: function() {
                return this.store.a;
            },
            set: function(val) {
                var old = this.store.a;
                this.store.a = val;

                if (this.diff === '') return;

                if (val === '' && this.b !== '') {
                    this.b = '';
                }

                if (val !== '' && this.b === '') {
                    this.b = parseInt(val) + parseInt(this.diff);
                }

                if (val !== '' && this.b !== '' && old !== '') {
                    this.b = parseInt(this.a) + (parseInt(this.b) - parseInt(old));
                }
            }
        },
        b: {
            get: function() {
                return this.store.b;
            },
            set: function(val) {
                this.store.b = val;

                if (this.diff === '') return;

                if (val === '' && this.a !== '') {
                    this.a = '';
                }

                if (val !== '' && this.a === '') {
                    this.a = parseInt(val) - parseInt(this.diff);
                }
            }
        },
        diff: {
            get: function() {
                if (this.a !== '' && this.b !== '') {
                    this.store.diff = parseInt(this.b) - parseInt(this.a);
                }

                return this.store.diff;
            },
            set: function(val) {
                this.store.diff = val;

                if (val === '') return;

                if (this.a !== '') {
                    this.b = parseInt(this.a) + parseInt(val);
                }

                if (this.a === '' && this.b !== '') {
                    this.a = parseInt(this.b) - parseInt(val);
                }
            }
        }
    }
});

Answer 1

您可以使diff成为计算属性并使用getter和setter函数，这样您也可以更新diff。查看http://vuejs.org/guide/computed.html#Computed_Setter。这适用于v-model，因此它会自动显示差异的值，并在您更改时调用set。

根据您的评论进行编辑，您可以设置属性以保留diff的值，然后仅根据您的应用逻辑设置A或B

var vm = new Vue({

  el: '#calculate-difference',

  data: {
    a: '',
    b: '',
    diffValue:''
  },
  computed:{
    diff:{
      get:function() {
        return parseInt(this.b) - parseInt(this.a);
      },
      set:function(newDiff){
        //Store the value of the diff input
        diffValue = newDiff;

        //Update A and B based on new difference, only if needed
      }
    }
  }
});