Using x-for Version 3.2.1 Causing Issue

[reasecret]

Hi,

I was using version 2.8.0 and my code was working fine. I wanted to upgrade Alpine to 3.2.1 but facing an issue.

My code is:

<div x-data="{ temp: 0, postId: `{{$post->id}}` }" class="flex items-center">
	<template x-for="item in [1,2,3,4,5]">
		<svg x-on:click="$wire.rate(temp, postId)"
			@mouseenter="temp = item"
			@mouseleave="temp = 0"
			class="cursor-pointer w-6 transition duration-150"
			:class="{'text-yellow-300' : (temp >= item)}"
			xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
			fill="currentColor">
			<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
		</svg>
	</template>
</div>

This is a 5 star rating component with Livewire 2.8 and working fine on Alpine Js v2.8.0.
On version 3.2.1 I see 10 stars. If I use item in [1,2] there is 4 stars item in [1,2,3] 6 stars. It is doubling.

Here is an gif example

I can't see anything about x-for on upgrade page. Is there any difference for using x-for on v2.x and v.3.x?

[danddanddand]

Nothing stands out to me with that that should be doubling it. I'd probably add :key="item" to the x-for as a first step and confirm there are no errors showing in console but looks like it should be working.

[reasecret]

Tried to add :key="item" too no changes.

[SimoTod]

3.2.1 is not the latest release, there have been many bug fixing since.

[reasecret]

Tried latest version and no changes...

[SimoTod]

Livewire version?

[reasecret]

2.8.1

[felixfrey]

I tested your code-snippet on 3.2.1 and could reproduce the behaviour. Altough, when I switched to 3.7.0, it worked as intended!
Take a look here:

• 3.2.1 - https://jsfiddle.net/kpf35es6/4/
• 3.7.0 - https://jsfiddle.net/g267nkoh/1/

[reasecret]

My mistake of course... I'm using Alpine via CDN. I installed Alpine months ago with npm and forgot that.
Because of that looks like working twice. All good now. Thank you all for your replies...