Web-development

Interesting technique — although I would suggest that it’s probably better to spend the time to better understand Vue’s reactivity and leverage the likes of computed props.

But if you’re between a rock and a hard place, this technique could get you out of trouble.

What can I say other than….Vue kick-ass!!!

There are two issues in your exemple for me:

1. It’s really an edge case. The moments where you need to do a whole ReRender instead of an update are very rare.
2. Your exemple with $forceUpdate is not comparable with the key solutin, for a simple rease : $forceUpdate will update the component itself, while…

Hi, but here’s the thing: this example has a key concept: you are confusing the array index with an entity as “id”.

The first is just a reference, the second is data itself.

Here I see more a data design failure than a need to perform a re-render action.

I might be missing something but if we += on a key value and something else already uses that key value, like a sibling component, doesn’t that introduce problems later on? Wouldn’t using something like lodash’s uniqueId function offer a better solution?

Hi Michael! Thanks for your response :)

I tried to keep things self-contained in a single file while using a SFC, which is true is not the usual way of writing Vue. In the end a component is just a variable, so we can easily mix and match them, but yeah, I can totally understand what you mean!

Let’s get some state managed 💃

Thank you for this Michael. I will be using this checklist over the coming months for sure but wanted to ask a question about abstraction levels. An example I always come back to is a Datatable/Grid. For me that feels like a perfect SFC that gets dynamically passed it’s headers and rows, plus other props as needed by any other component it is used in.