x-if evaluates content inside the template tag before the template tag itself

[arcanemachine]

I have a template that is only supposed to render if a x-if condition is met (it's also the index of an array containing a list of objects).

Here's a basic example (Codepen version here):

<div x-data="{ arr: [{a: 0}, {a: 1}],
               current: undefined }">

  <button @click="current = undefined">Undefined</button>
  <button @click="current = 0">0</button>
  <button @click="current = 1">1</button>

  <template x-if="current !== undefined">
    <div x-text="arr[current].a"></div>   
  </template>

</div>

The issue occurs when going from 1 to undefined. The logic inside the template is evaluated before evaluating the x-if statement in the template itself. Alpine attempts to find the value of arr[current].a before checking if current exists as required by the x-if statement.

I'm certain this can be worked around easily. I just think it makes sense for the x-if statement to be evaluated before the logic inside the template.

NOTE: This bug does not appear in v2.8.2, but does appear in 3.0.0

ANOTHER NOTE: If my x-if statement only checks for current, there is no error. However, this prevents me from accessing the 0th index of my array.

Thanks for any help you can offer :)

[SimoTod]

Not a fix for the existing bug but as a workaround you can prevent the error checking for the existence of the variable first
<div x-text="arr[current] && arr[current].a"></div>

[arcanemachine]

Thanks, I wrote a little helper function that does the same thing. I appreciate the response.

I made an attempt to dig into the code but there was too much going for me to decipher.

[GamesmenJordan]

Related: #2114

[arcanemachine]

Looks like this got fixed by #2556.