Vue Force Computed Update

Posted on  by admin

Modified3 months ago. Here is my component's computed property:. I need to call the filtering function inside computed again.To activate the Favorite button.

Murat SağlıkMurat Sağlık. There is no need to force a computed value to update.

A computed property will always be recomputed automatically if a needed value is changed.

So, in your case, you will need to change singlePlaces and filteredPlaces will automatically be updated. There is a thing to note about Array and Object reactivity as seen in the doc (https://vuejs.org/v2/guide/reactivity.html#For-Arrays).

In your example, you did not include the code when adding a favorite place, but you will probably need to do something like this:.

44 gold badges3030 silver badges4040 bronze badges. 4040 bronze badges.

  • If you want to force a computed property to update and recalculate it's value, you can simply use a data property and just mention that property in the computed function (you don't have to use it, just being there is enough), and then change that data property; This will force the computed value to update.
  • Here is the code:. 11 gold badge33 silver badges2222 bronze badges.
  • 2222 bronze badges. First of all, instead of your markup you could save two times less events handling, two times less DOM nodes creation and two times less recompute and redraw just by toggling the class.
  • Also I'm not sure if invoking a function inside @click event wouldn't fire this function immediately and would just in case wrap it into anonymous function.

Also, notice that instead of place.id I am passing whole place object reference to addFavoritePlace:.

Second of all, part of filteredPlaces code does not have sense as you are setting variable that is not used elsewhere nor returned, so garbage collector will kill it immediately anyway.

Instead you could just go with:. And at last, you can just update singlePlaces items and they will automatically affect filteredPlaces, no need to do anything special, in case you don't have is_favorited property in every place you can map it on init or force Vue to track its updates with set method.

  1. Also, as I said, I would pass whole place reference instead of id so we wouldn't have to find this element again in the stack:.
  2. 22 gold badges2626 silver badges4545 bronze badges.
  3. 4545 bronze badges. Modified3 months ago.
  4. In Vue 2, instance method this.$forceUpdate() could be used to update the component manually.

How can we force update component in Vue 3 - Composition API (inside setup method) ? Thanks, in advance. 22 gold badges1919 silver badges3939 bronze badges.

Not the answer you're looking for? Browse other questions tagged vue.jsvue-componentvuejs3vue-composition-api or ask your own question.

3939 bronze badges. $forceUpdate is still available in Vue3, but you won't have access to it in the setup() function.

If you absolutely need to use it, you can use object API component or this fancy trick..

If this seems like a ridiculous solution, trust your Judgement.

Ideally your application would not rely on forceUpdate.

The forceUpdate method

If you are relying on it, it likely means that something is miss-configured, and that should be the first thing to resolve. 1515 gold badges8686 silver badges133133 bronze badges.

133133 bronze badges. When I need to force an update in vue I usually add a key with a value I can change, which will then force vue to update it.

That should work in vue 3 as well, though I admit I haven't ever tried it.

Here's an example:. You can read more about it here: https://michaelnthiessen.com/key-changing-technique/.

4040 bronze badges. 6,23333 gold badges2222 silver badges3535 bronze badges.

  1. 2222 silver badges3535 bronze badges. If using Options API:. If using Composition API with