Checksum Throwing Error With Entangled Data

[iAmKevinMcKee]

Description

I am getting a checksum error (corrupt data) when I try to change entangled values.

Exact steps to reproduce

I need dependent selectpickers. The contrived example is where you have states and cities. Select a state, and the cities update with just the cities associated to that state. Then you can choose multiple cities.

1. Use the code below
2. Click on 'Missouri'
3. Click on both 'St. Louis' and 'Kansas City'
4. Click on 'Texas' and see the error

https://user-images.githubusercontent.com/4503765/102845164-8b0cd800-43d2-11eb-8dc4-062b801e0657.mp4

Stripped-down, copy-pastable code snippets

class Debug extends Component
{
    public $states = [];
    public $cities = [];
    public $state;
    public $city;
    public $selectedCities = [];

    public function mount()
    {
        $this->states = collect([
            1 => 'Missouri',
            2 => 'Texas',
        ]);

        $this->cities = collect([
            1 => 'St. Louis',
            2 => 'Kansas City',
            3 => 'Dallas',
            4 => 'Houston',
        ]);
    }

    public function updatedState($value)
    {
        if($value == 1) {
            $this->cities = collect([
                1 => 'St. Louis',
                2 => 'Kansas City',
            ]);
        }
        if($value == 2) {
            $this->cities = collect([
                3 => 'Dallas',
                4 => 'Houston',
            ]);
        }
    }
}

<div x-data="{
        city: @entangle('city'),
        state: @entangle('state'),
        cities: @entangle('cities'),
        states: @entangle('states'),
        selectedCities: @entangle('selectedCities'),
    }">
    <h3>State (click on one)</h3>
    <template x-for="item in Object.entries(states)" :key="item[0]">
        <div x-text="item[1]" x-on:click="state = item[0]"></div>
    </template>
    <hr/>
    <h3>Cities (click to select multiple)</h3>
    <template x-for="item in Object.entries(cities)" :key="item[0]">
        <div x-text="item[1]" x-on:click="selectedCities.push(item[0])"></div>
    </template>
    <hr/>
    Selected Cities
    <template x-for="item in Object.entries(selectedCities)" :key="item[0]">
        <div x-text="item[1]"></div>
    </template>
</div>

Context

• Livewire version: 2.3.5
• Laravel version: 8.19
• Alpine version: 2.8
• Browser: Chrome

[joshhanley]

@iAmKevinMcKee thanks for the report! I have submitted a PR with a fix #2251.

Hope this helps!

[squishythejellyfish]

👋 Oh Hi! I'm Squishy, the friendly jellyfish that manages Livewire issues.

I see this issue has been closed.

Here in the Livewire repo, we have an "issues can be closed guilt-free and without explanation" policy.

If for ANY reason you think this issue hasn't been resolved, PLEASE feel empowered to re-open it.

Re-opening actually helps us track which issues are a priority.

Reply "REOPEN" to this comment and we'll happily re-open it for you!

(More info on this philosophy here: https://twitter.com/calebporzio/status/1321864801295978497)