V3 Nested x-for and x-if issue

[kylethielk]

Hi There,

We are in the process of attempting to upgrade Alpine v2.8.0 to v3.2.3.

We are running into an issue with nested a x-for pattern we have used in V2 without issue and can't seem to determine why in V3 it is throwing an error. One thing to note, the error seems to be handleable/caught and simply reported in the console; in other words it doesn't interfere with the components functionality from what we can see.

Its a fairly contrived example but is the most stripped down version I could build that still demonstrates the issue.

Here is the code with V3: https://jsfiddle.net/Ls9qhgo5/ (Click "Clear All Times" button and then open browser console to see error).
Here is the exact same code with V2: https://jsfiddle.net/bqg1rekp/ (Click "Clear All Times" button and then open browser console to see error).

Any help would be appreciated here tracking down whats happening and/or figuring out a way to work around this.

Update: I stumbled upon #1837 which looks it might be the cause (or at least related).

[kylethielk]

Distilled down even simpler into pseudocode:

<template x-for="item in items" :key="item">
   <div>
      <template x-if="!!otherItems['subKey']">
        <div>
          <template x-for="otherItem in otherItems['subKey'].items" :key="otherItem">

At first !!otherItems['subKey'] evaluates to true (and thus the inner loop runs). We then delete otherItems['subKey'] which will turn x-if="!!otherItems['subKey']" falsy. This should prevent <template x-for="otherItem in otherItems['subKey'].items"> from running however it still does.

A workaround is to do the following but it is clunky:

<template x-for="item in items" :key="item">
   <div>
      <template x-if="!!otherItems['subKey']">
        <div>
          <template x-for="otherItem in (!!otherItems['subKey'] ? otherItems['subKey'].items : [])" :key="otherItem">

[abinoda]

Just wanted to +1 this issue, it's blocking us from upgrading to v3 as well.