Read-only access triggers $watch

[vladrusu]

Hello!

I have an issue with Alpine 3.0.6 (not present in Alpine v2). Consider the following code (codepen link) which does a basic sum operation:

<form x-data="test">
	<input type="number" x-model="q1">
	<input type="number" x-model="q2">
	<input x-bind:value="total">
</form>

<script>
document.addEventListener('alpine:initializing', () => {
	Alpine.data('test', () => ({
		q1: 0,
		q2: 0,
		total: 0,

		updateTotal() {
			this.total = parseInt(this.q1) + parseInt(this.q2);
		},

		init() {
			this.$watch('q1', () => {
				console.log('q1 changed');
				this.updateTotal();
			});
			this.$watch('q2', () => {
				console.log('q2 changed');
				this.updateTotal();
			});
		}
	}));
});
</script>

Change the first field (for ex.: 1), then the second field (for ex.: 1) and look to the Debug console.

Expected output:
q1 changed
q2 changed

Actual output:
q1 changed
q2 changed
q1 changed

It appears like when calling updateTotal() on the second watch, accessing this.q1 also triggers a $watch event for q1, despite not modifing it.

[alexej-d]

I've seen the same behavior. Is this intended or a bug?

[vladrusu]

I fail to see how this isn't a bug. As I said, this doesn't happen in v2.

[alexej-d]

Seems to me too. But one might argue it's an intended breaking change because now the $watch callback receives the old value as a second argument and you could compare if there were any changes like so:

this.$watch('value', (value, oldvalue) => {
  if (value !== oldvalue) // react
}) 

[vladrusu]

Yes, that's currently the workaround I implemented too, but I don't like it, especially when having multiple whatches set I have to add this bloat to every callback...

[KevinBatdorf]

This seems like a bug. It also occurs with x-effect

https://codepen.io/KevinBatdorf/pen/RwpdJaY

[vladrusu]

Maybe @calebporzio could take a look. 🙏

[atompulse]

Another issue but I'm guessing the reason is the same:

this.$watch('value', (value) => {
   Alpine.store('xyz').....
})

this will trigger the watcher endlessly... for sure this is not the correct behaviour.

[calebporzio]

@KevinBatdorf, I think this is a bug when it happens with $watch, however, I think it's intended behavior with x-effect - as x-effect SHOULD monitor every dependancy and re-run when one changes.

Here's a simplified version of the pen you provided that I think works as you'd expect it to:

    <form x-data="{ a: 0, b: 0, total: 0, update() { this.total = this.a + this.b }}">
        <input type="number" x-effect="console.log('q1 fired'); update()" x-model.number="a">
        <input type="number" x-effect="console.log('q2 fired'); update()" x-model.number="b">
        <input :value="total">
    </form>

[KevinBatdorf]

I think it's intended behavior with x-effect - as x-effect SHOULD monitor every dependancy and re-run when one changes.

Ah right, not sure what I was thinking there. Maybe I expected x-effect to be scoped to the input for some reason. 7 days was forever ago :)

[sawirricardo]

Hi, is this fixed?

[vladrusu]

Yes, this appears to be fixed now (3.x branch).

[sawirricardo]

wait is it? I still encounter it when changing other property. which version do you use?