v-for with object changes inside another v-for loop with no change

Hello,

Thanks to @martinbean and @richardhulbert, I have identified the real problem for which I had written this post.

https://laracasts.com/discuss/channels/vue/v-for-and-key-is-it-a-good-idea-to-use-md5-to-generate-a-key

Here is a new post because the problem was is different than how to write a key.

The real problem is that I have 2 loops : the first loop with itemsIndexes and the second loop with arrayOfItems inside the first one.

The itemsIndexes array helps me to display some divs in a complex visual representation. This array doen't change, so all what is in the first loop won't going to change either.

The problem is that I have changes in arrayOfItems in the second loop. But theses changes don't generate a DOM refresh because there isn't any change in the first loop.

And when I change the width of the browser window, I get the right changes in the DOM according to the arrayOfItems content as soon as the itemsIndexes changes (the itemsIndexes content depends on the width of the browser window).

But I'd like that the DOM refreshes even if I don't change the width of the browser window.

<div v-if="arrayOfItems.length > 0" class="devices-container self-center md:self-start flex flex-col gap-2">
    <div
        v-for="(row, rowIndex) in itemsIndexes"
        :key="'items-row-'+rowIndex"
        class="flex gap-2"
        :class="{ 'ml-[104px]': rowIndex % 2 !== 0, '-mt-[57.7350px]': rowIndex > 0 }"
    >
        <component
            v-for="(item, itemIndex) in arrayOfItems.filter(function (subItem, subItemIndex) {
                return subItemIndex >= row.startIndex && subItemIndex < row.endIndex;
            })"
            :key="'item-'+item.type+'-'+item.object.id"
            :is="item.component"
            :item="item.object"
            :data-id="item.object.id"
        ></component>
    </div>
</div>

To solve this problem, I have tried to have another key for the loop, key include the endpoint id value, but also the state id, the color, ... but in this case only the state and the color are updated on the screen, and not for example the name.

Do you have any idea how to solve this ?

What do you think about stringifying the entire object for the key ?

:key="JSON.stringify(item.object)"

I have tested, it works very well, but is it a good idea to do so ? I never did so, but the AI suggested me to do like this, but I wasn't convinced.

Perhaps the problem is related to the loop inside the loop, or perhaps it's just a key problem.

Thanks for your help.

V