x-for trying to loop through a cleared object's keys

[domjanzsoo]

Hi there,

Having a really weird behaviour with one of my x-for loops here, wondering if someone can point me to what I'm missing.
So I have a multi select livewire component, which displays some tags on the top with the names of the selected options. The markup of those tags looks like this:

 <template x-for="id in Object.keys(selected)" :key="id">
        <div x-show="selected[id].selected"  class="flex justify-center items-center m-1 font-medium py-1 px-1 bg-green-light rounded  border">
          <div class="text-xs font-normal leading-none max-w-full flex-initial" x-model="selected[id]" x-text="selected[id].name"></div>
          <div class="flex flex-auto flex-row-reverse">
            <div x-on:click.stop="remove(id)" class="text-red-dark">
              <x-icon name="x-mark" classes="cursor-pointer" />
            </div>
          </div>
        </div>
   </template>

And then in the wrapper of this multi-selector I have an event listener (the event is submitted by the livewire class when the form submission is successful), which clears that selected object:

  x-init="() => {
    console.log('form-submit event');

    Livewire.on('role-added', () => {
        selected = {};
      });
  }"

The problem is that after the object is cleared, the template is still trying to loop through the selected keys (no idea through what keys), and it returns console errors triggered in the body of the for loop: Cannot read properties of undefined (reading 'selected')

Tried to add an x-show checking whether the object has keys or not, but that didn't fix it.
Also, I did some debugging, the array of the keys is empty after the event handled.

Question: how that loop is generated if the object is empty and has no keys?

Probably adding some ternary operators would avoid the errors to be thrown, but still would like to figure out, why the body of that loop is reached.
Thanks.

[ekwoka]

Easy, just stop looping over keys.

Loop over entries.

<template x-for="[id, value] in Object.entries(selected)" :key="id">

In your above, your effects are using the key to access selected, but if selected changes, the key won't point to anything anymore, but the effect may still try to run before being cleaned up.

[domjanzsoo]

Yeah, I should have thought of that, probably that index still pointing to something even after clearing the object.
Thanks.