variable data contamination

[TerrePorter]

I seem to be having some data contamination.

I've created a test page, but I was unable to get codepin to run it as Alpine seems to be problematic there.

What happens is when you click the add button, it adds a random number to the array. When you click the reset button it resets the array to the other array, aka the defaults.

My problem is when I click the add button a few times, then click the reset button the two arrays become synced and the add button adds to both arrays even when the second array is never called.

<script src="//unpkg.com/alpinejs" defer></script>
<script>
    function myTest() {
        return {
            mydata: [],
            mydataO: [],
            mydataLength: 0,
            mydataOLength: 0,

            init() {
                this.mdata = {!! json_encode($test_data) !!};
                this.mdataO = {!! json_encode($test_data) !!};

                this.updateLengths();
            },

            addItem() {
                this.mydata.push(Math.random());
                this.updateLengths();

            },

            reset() {
                this.mydata = this.mydataO;
                this.updateLengths();
            },

            updateLengths() {
                this.mydataLength = this.mydata.length;
                this.mydataOLength = this.mydataO.length;
                console.log(this.mydataLength);
                console.log(this.mydataLength);
            }
        }
    }
</script>
<div x-data="myTest">
    <div>
        mydata length: <span x-text="mydataLength"></span>
        <BR>
        mdataO length: <span x-text="mydataOLength"></span>
    </div>
    <div>
        <button @click="addItem">Add Item</button>
        <button @click="reset">reset</button>
    </div>
</div>

[SimoTod]

this is how javascript work, this.mydata = this.mydataO; doe not create a copy of this.mydataO, you are just pointing this.mydata to the same array so, from that point on, when you click addItem, you are adding items to this.mydataO

[TerrePorter]

Ok, i've never had that happen before. Sorry for the trouble.

[ekwoka]

It wasn't mentioned how to resolve this, but the simplest would be this.mydata = [...this.mydata0] if you aren't concerned with deep changes.

Otherwise this.mydata = structuredClone(this.mydata0) would deeply clone the object.

[kurtrank]

I just tried this in a little project and when I do:

Alpine.data("story", () => ({
	project: {
		sections: [
			{
				_locked: [],
				type: 1,
				style: 4,
				length: 8,
				progression: [],
			},
		],
		characters: [],
	},
	addSection() {
		// insert new section at the end based on the content of the last section
		const newSection = structuredClone(this.project.sections.at(-1));
		this.project.sections.push(newSection);
	},
}));

I get an error:

Uncaught DOMException: Proxy object could not be cloned.

It appears structuredClone doesn't work with proxies. I tried destructuring the proxy into a new plain object before copying, but the issue is that I have nested data in the object I am trying to clone. If I remove any nested arrays then it works but if I want more than just numbers and strings I would have to iterate down through all the levels anyway to convert them from proxies anyway.

For now I have fallen back to converting to JSON string and back again to get it to work with nested arrays/objects 🙃

const newSection = JSON.parse(JSON.stringify(this.project.sections.at(-1)));

[ekwoka]

Okay, no worries.

This is simple.

structuredClone(Alpine.raw(this.project.sections.at(-1)))

That will get the target from the proxy.

[kurtrank]

Oh very nice. I saw a vue example that used toRaw to solve this problem but I didn't know that was available in Alpine. I don't see it in the docs but I guess it makes sense as Alpine uses vue's reactivity. Thanks!