防止Vue循环

Question

我有三块地

小时——分钟——和总数

如果小时或分钟发生变化，我想计算一个总数。如果总数发生变化，我想计算相应的分钟和小时数。

例子：

1h 30分钟=1.5总计

2.25总计=2h 15分钟

我正试图用手表来达到这个目的

watch: {
            hour: {
                handler: (new_hour, old_hour) => {
                    if(isNaN(new_hour)){
                        manual.hour = old_hour
                    }else{
                        manual.setTotal();
                    }
                }
            },
            minutes: {
                handler: (new_minutes, old_minutes) => {
                    if(isNaN(new_minutes)){
                        manual.minutes = old_minutes
                    }else{
                        if(Number(new_minutes) > 60){
                            manual.minutes = old_minutes
                        }else{
                            manual.setTotal();
                        }
                    }
                }
            },
            total:{
                handler: (new_total, old_total) => {
                    if(isNaN(new_total)) {
                        manual.total = old_total;
                    }else{
                        const hour = new_total.split(",")[0];
                        const minutes = new_total.split(",")[1];
                        manual.hour = hour;
                        manual.minutes = (minutes * 60).toFixed(0);
                    }
                }
            }
        }

但是，这会导致一个循环，因为on处理程序总是调用另一个处理程序。如何以更明智的方式实现这一点？

Answer 1

我还没有检查过这个，但是也许你可以用setter来交换计算属性的观察者，参见ref计算setter

请注意此处的注释——观察到的特性的循环依赖性#622（yyx990803于2014年12月11日发表评论）

问题是，即使存在循环依赖关系，最终值应该能够在1次额外迭代后稳定下来（Vue将停止，因为新的计算值是相同的）

或

我想你可以把

if (newValue === oldValue) {
  return
}

在每个观察者的顶部。这就是computed所做的。

Answer 2

您可以使用onkeyup监听器（和/或更改）

new Vue({
	el: "#app",
  data: {
  	input_h: 0,
  	input_m: 0,
  	input_t: 0
  },
  methods: {
  update_h (e) {
  	this.input_h = Number(e.target.value)
    this.update_t(null)
  },
  update_m (e) {
  	this.input_m = Number(e.target.value)
    this.update_t(null)
  },
  update_t (e) {
  	if (e === null) {
    	this.input_t = Math.round((this.input_h + this.input_m / 60) * 100)/100
    } else {
    	this.input_t = Number(e.target.value)
      this.input_h = Math.floor(this.input_t)
      this.input_m = Math.round(this.input_t%1 * 60)
    }
    
  },
  }
})

html lang-html prettyprint-override"><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<div id="app">
  <input :value="input_h" @keyUp="update_h"/>Hours<br/>
  <input :value="input_m" @keyUp="update_m"/>Minutes<br/>
  <input :value="input_t" @keyUp="update_t"/>Total<br/>
</div>