[Vuejs]-Preventing Vue from looping

by

1👍

✅

you could use onkeyup listener (and/or change)

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

Otherwise, if you want to prevent circular dependency, you need to set up a single source of data, and use computed getters and setters to update the other fields. You don’t even have to use a visible field for that.
https://jsbin.com/tagupab/edit has a working example

👤Daniel

1👍

I haven’t checked this out, but perhaps you could exchange watchers for computed properties with setter, see ref Computed setter

Note the comment here circular dependency on observed properties #622 (yyx990803 commented on Dec 11, 2014)

The thing is even when there is a circular dependency, the eventual
value should be able to stabilize after 1 additional iteration (which
Vue will then stop because the new evaluated value is the same)

OR

I guess you could put

if (newValue === oldValue) {
  return
}

at the top of each watcher. This is sort of what computed does anyway.

👤Richard Matsen

Leave a comment