force re-computation of a computed property

[jcaxmacher]

Is there a way to force re-computation of a computed property when none of the values the property depends on have changed?

I have a computed property that depends on some of the model data as well as the current time. So, the value of the computation changes over time. I'd like to force re-computation on an interval to capture the time dependency. Right now, I'm using a value on the root VM that is being toggled on an interval is a "dummy" dependency of the computed property. This works, but it seems like there should be a better solution.

[yyx990803]

yeah, I can add something like vm.$recompute('key')

[yyx990803]

Rethinking the problem, it's probably better to do:

var vm = new Vue({
  data: {
    currentTime: Date.now()
  },
  computed: {
    /* ... */
  },
  created: function () {
    var self = this
    setInterval(function () {
      self.currentTime = Date.now()
    }, 1000)
  }
})

[pea3nut]

I think vm.$recompute('key') is a good idea, if a computed property depends on DOM element attributes , I need to manually update the calculation of attributes.
otherwise, I have to turn all dependent DOM attribute into vue component data to change the computed property.

[benjarwar]

I also have an edge use case for vm.$recompute, which involves needing to reference a DOM element that may be hidden depending on the breakpoint. If it's hidden, but the underlying data changes, my computed values end up being incorrect, and some features aren't rendered properly on window resize. If I had this method, I could simply recompute on window resize once the DOM element is available again.

[sirlancelot]

Your DOM shouldn't have any sources of truth. When using Vue, the DOM should simply be a view in to your data. If you have data that only exists in the DOM you're gonna have a bad time.

[pea3nut]

@sirlancelot Why shouldn't I have any sources of truth from DOM? Vue is an incrementally-adoptable JavaScript framework. I'd like to use Vue as a jQuery-like tool, not entrusted all DOM to Vue.

I admit that Vue has a full-abstract power to let that I need not operate DOM, but sometimes, I just want to use Vue to do some simple action.

[benjarwar]

@sirlancelot it's a bit tough to explain, but that's not I'm doing. My data/computed values remain the source of truth.

To go into more detail, I'm referencing DOM elements to render an indicator element under a selected tab UI. The indicator transitions/animates in width and left position as a new tab is clicked. But, for small/mobile screens, a different UI is used (a select dropdown). Both the select and the tabs utilize the same data, let's call it selectedIndex.

To render the width/left position of the indicator, I have a computed method, let's call it getStyles, which returns the width and left offset of the button that corresponds with the selectedIndex value.

The problem arises if the user changes the selectedIndex via the select UI while on a small viewport. Since the value of selectedIndex changes while the tabs aren't displayed, I can't get the width/left offset for the selected tab. Therefore, getStyles doesn't return the correct value. And if the user then switches to the medium breakpoint, the tabs are re-displayed but the indicator isn't styled properly. Edge case, but no bueno.

My current solution is to move the tabs offscreen via CSS (instead of doing a v-if or display: none;) such that they can still be inspected by getStyles whenever selectedIndex changes. But that causes other headaches (such as the buttons being in the tab hierarchy). If I could manually $recompute on breakpoint change, it'd be a little saner and more explicit.

Sorry for the length. I do think the enhancement warrants further investigation and could be useful :)

[yeedle]

What if a computed property depends on a server call and I want to offer a refresh button? Could be a good use case for $recompute.

[nwaughachukwuma]

Like inline expressions, Vue.js automatically collects dependencies for computed properties and refreshes/recomputes them when their dependencies change. All you may need to do is reference those dependencies for which you need a recomputation. Check following for example: http://optimizely.github.io/vuejs.org/guide/computed.html

[yeldiRium]

I have a very similar use-case to @benjarwar.
I also want to position an element based on the offset of another element.

I currently do so by retrieving the element's boundingClientRect via this.$refs.elementName.getBoundingClientRect() inside a computed property.
Vue seems to not pick up on this and update on changes. Probably (not sure about what goes on behind the scenes) because each call returns a new BoundingClientRect object.

Is there a way around this, @nwaughachukwuma? Because if not, I'm also in favor of $recompute in some way or the other.

I think this.$recompute("key") would be very practical.

I realize that I could retrieve this data in an interval and update my component's data instead of using a computed property.
However, this seems more computationally expensive to me, since it would also re-retrieve the data when I don't explicitly need it. And since I use the component in question many times per site (potentially up to hundreds), I don't want to recollect more often than necessary.

EDIT:
In the meantime i recommend this very very dirty hack:

...
data() {
  return {
    forceRecomputeCounter: 0
    ...
  };
},
computed: {
  updateMePlox() {
    this.forceRecomputeCounter;
    ...
  }
  ...
},
methods: {
  thisShouldTriggerRecompute() {
    this.forceRecomputeCounter++;
    ...
  }
  ...
}
...

This is in my opinion relatively little boilerplate (although as I said very dirty) and let's you recompute on demand.

[benjarwar]

@yyx990803 can we get a reconsideration of this functionality? I think there are several use cases outlined above where $recompute would provide a less hacky way of getting values. Especially when dealing with responsiveness and needing to calculate layout styles across multiple DOM elements.

I get that $recompute could be ripe for abuse, or have unintended side effects. But the current workarounds feel more anti-patterny to me than providing an explicit method.

[psr1981]

I have another use case 👍
I am trying to calculate inactive markers on leaflet based on the time elapsed. markers are generated as computed property.

now i need to refersh markers every 5 mins. i am not able to do that without wiring it up thru vuex store which seems wrong.

i should be able to ask vue to recompute markers every 5 mins... that should be the ideal solution here.