vue two computed properties depending on each other

Question

Could you help me understand or say if it is possible to do "circular" computed properties in Vue,

I want to divide date range into periods of certain durations, based on two criteria

• when end date is provided interval (duration) is calculated dateRange / period
• when interval(duration) is provided then endDate is calculated startDate + interval * period

see JSFiddle

I already try to addy second computed property for interval but it went into loop and crashed the browser.

Answer 1

The recommended way of handling this is to use a computed setter. Make it so that one value is a normal data value, and the other is a computed property. Then, make it so that, when the computed property is set, it'll calculate and set the data value.

For your case, you can add a setter for endDate, then calculate interval when it's set.

  computed: {
    endDate: {
      get() {
        return moment(this.startDate).add(this.interval * this.periods, 'days')
      },
      set(value) {
        this.interval = // whatever `endDate` would end up being from setting interval directly, calculate that value here
      }
    },
  }