Issue with keying of blocks (?)

[jorngeorg]

Hi,

and thanks for making and sharing this! It works brilliantly in most cases, however I have the following scenario where it does not (a bit hard to explain but I'll try):

I have a page with two languages, and that I use the same component for. I use <block-content :blocks="blocks" :serializers="serializers" /> to render the content on this page. I use watch $route to catch language change and to update the block variable, so the page component does not get recreated, only the data updated. I also do some computed styles based on the content of the blocks. The number of blocks in the two languages is not the same, e.g.: { en: {blocks: Array[6]}, nb: {blocks: Array[8]} }

So what happens when I change language is that all the content in the various blocks get updated correctly, but the computed styling gets mixed up and apparently sticks to the order the element had in the previous language. So if the third block element was pink in the first instance, it will stay pink in also when changing languages, even though it should be red.

My hunch is that this is related to the way the blocks are keyed, and I see you use index in some cases, to that might be the sinner? I'd be willing to help out with anything if I can, just let me know.

Thanks again!

[jorngeorg]

Doh! I figured it out. It was something with the way I was computing the styles. 🤦‍♂️