$watch( ['array','of','var'] ... callback (value, oldValue) => ... value should be an array... ?

[Ronan-Lenor]

Hello,

when i $watch multiple variable by using an array in the first parameter, all variables are succefully watched.

But the value that is passed in the parameter is only the value of the first variable writed in the array.

so, i was wondering if when a array is given in the first parameter of $watch, you could pass the full array of variables in the callback instead of only its first index.

Thanks,

[SimoTod]

I think it works by chance but it's not actually supported. :) Probably it works because of the workaround to enable deep watching with arrays so it's subjected to breaking changes if that workaround changes for any reason.
The key of $watch should be a string containing the observed parameter so (again, it's not supported but it works), to achieve what you want, you can do

<div x-data="{foo: 1, bar: 2}" x-init="()=> $watch('[foo, bar]', (value, oldValue) => console.log(value, oldValue))">

[SimoTod]

Yeah, it's not really an array at that stage
$watch wants a key which is usually a string containing the name of a variable. The reason why it does that is that the variable doesn't exist until it gets evaluated in the scope of the component so if you try to pass it into watch as a real variable, it will just be undefined. (your original example wasn't an array of variables but an array of strings).

About changing it, the project is open source so you can try to improve it and see if it gets accepted. 👍

[Ronan-Lenor]

ahah, if only i had time for this 😅

nontheless i had a quick look in the source and saw that it's end here :

alpine/packages/alpinejs/src/evaluator.js
near
normalEvaluator(el, expression) { ... if (typeof expression === 'function') { ...
it probably need an entire new function generateEvaluatorFromArray(dataStack, expression) for typeof expression === 'array'

so, if someone passing by here ... 😉

[SimoTod]

Not sure if you like it better but it would also work if you use a function as a key since the variable won't be resolved before calling the evaluator in that case $watch(() => [foo, bar], (value, oldValue) => console.log(value, oldValue))

[Ronan-Lenor]

Ah this one is much better. this would probably be more stable and supported on future release.
this solution should have been on the official documention 🙄

[ekwoka]

It only happens to work. It is not the established API.