Question

我有三个字段

小时 - 分钟 - 和总数

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

示例：

1小时30分钟= 1.5总计

2.25总计= 2小时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);
                    }
                }
            }
        }

然而，这导致了一个循环，因为在处理程序上总是调用另一个处理程序。如何以更智能的方式完成？

Answer 1

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

请注意此处的评论circular dependency on observed properties #622 (yyx990803 commented on Dec 11, 2014)

即使存在循环依赖，最终也是如此值应该能够在1次额外迭代后稳定（其中然后Vue将停止，因为新的评估值相同）

<强> OR

我想你可以把

if (newValue === oldValue) {
  return
}

在每个观察者的顶部。无论如何，这都是计算出来的。

Answer 2

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

否则，如果要防止循环依赖，则需要设置单个数据源，并使用计算的getter和setter来更新其他字段。你甚至不必为此使用可见字段。 https://jsbin.com/tagupab/edit有一个工作示例

防止Vue循环

2 个答案: