x-model: Uncaught TypeError: Cannot read properties of undefined

[gurgunday]

Hey everyone! Loving Alpine so far!

I have a problem with accessing properties using x-model

Here's a simple list of items:

              <template x-for="(link, index) in fastLinks" :key="index">
                <li
                  class="card card-bordered card-compact relative mt-2 bg-base-100"
                >
                  <div class="card-body place-items-center">
                    <input
                      x-model="fastLinks[index]"
                      placeholder="http(s)://"
                      type="url"
                      name="fastLink"
                      class="input input-bordered w-full"
                    />
                    <button
                      x-on:click="removeFastLink(index)"
                      type="button"
                      class="btn btn-circle btn-outline btn-xs absolute right-2 top-2"
                    >
                      ✕
                    </button>
                  </div>
                </li>
              </template>
              <li
                class="card card-bordered card-compact relative mt-2 bg-base-100"
              >
                <div class="card-body place-items-center">
                  <input
                    x-model="newFastLink"
                    placeholder="Add new link"
                    type="url"
                    class="input input-bordered w-full"
                  />
                  <button
                    x-show="newFastLink"
                    x-on:click="addFastLink()"
                    type="button"
                    class="btn btn-circle btn-outline btn-xs absolute right-2 top-2"
                  >
                    ✔
                  </button>
                </div>
              </li>

And its data:

document.addEventListener("alpine:init", () => {
  window.Alpine.data("profile", () => {
    return {
      fastLinks: ["https://example.com"],
      newFastLink: "",
      addFastLink() {
        this.newFastLink = this.newFastLink.trim();

        if (this.newFastLink) {
          this.fastLinks.push(this.newFastLink);
          this.newFastLink = "";
        }
      },
      removeFastLink(index) {
        this.fastLinks.splice(index, 1);
      },
    };
  });
});

This works perfectly, now if we change x-model="fastLinks[index]" to x-model="fastLinks[index].length", just for the sake of this example, when we remove an item, we get in the console the following error:

Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at [Alpine] fastLinks[index].length (eval at <anonymous> (cdn.min.js:5:665), <anonymous>:3:49)

I think this shouldn't happen -- we simply remove an item and the template should rerender without an error with the mutated array

Maybe x-data is updated before the x-for so the property lookup on the item that no longer exists is causing the error

It's important to note that the behavior of this code is correct and it works, I'm just wondering why I'm getting a console error each time an item is removed

[ekwoka]

Which version of Alpine are you using?

[gurgunday]

Latest

[ekwoka]

This should solve it in the next release: #4300

In the meantime, it should be non-destructive.

[gurgunday]

Just checked the PR and yeah it LGTM!

Thank you so much!

Is there a release date for this?

Also CCing @calebporzio