x-model does not catch element.value changes #1388
Replies: 3 comments 1 reply
-
|
@lupinitylabs I'm not sure this is something that Alpine should document, since it's more of a JavaScript/browser caveat than an Alpine one. |
Beta Was this translation helpful? Give feedback.
-
|
Is there a way to manually force an update of an x-model in this situation? I am using a nice Tailwind datepicker (https://flowbite.com/docs/plugins/datepicker/) which puts a date into an input field. But Alpine doesn't detect that the field has changed and therefore update the x-model. Is there a way to force an update on @blur? |
Beta Was this translation helpful? Give feedback.
-
|
As I mentioned above, you can always trigger an input event manually, of course you can also do this on blur. Something like this should work: <input type="date" ... @blur="$event.target.dispatchEvent(new Event('input'))"> |
Beta Was this translation helpful? Give feedback.
-
|
I have a same issue with hankhank10 — I use a 3rd-party web component for a date picker. It emitan s event so I can get the selected date. I use a custom event listener and paste the Thanks to lupinitylabs, I can manually dispatch new empty event, and Alpine updated well. <script>
const calendar = document.querySelector("#date-calendar")
calendar.addEventListener("change", (e) => {
const { target } = e
const { value } = target
document.querySelector("input[name='dates']").value = value
document.querySelector("input[name='dates']").dispatchEvent(new Event("input")) // Here
})
</script>
<html>
<script defer src="/static/alpine.js"></script>
<div x-data="{ dates: '' }">
<form>
<input type="text" name="dates" x-model="dates" />
<button
x-bind:class="dates ? '' : 'disabled'" <!-- Here -->
>
Create
</button>
</form>
</div>
</html> |
Beta Was this translation helpful? Give feedback.
-
This is more of a documentation request than an issue report.
The documentation does not seem to mention anywhere that when any script programmatically changes the value of an input that is bound to data via
x-modelby doing something like......AlpineJS is unable to track the change, because no event is emitted. I feel that it should be explicitly mentioned that it is crucial to have such a value assignment be followed by a manual dispatch of an event that prompts AlpineJS so sync the data:
It might be obvious if you are aware of that, but it cost me some time figuring out why the
x-modelattribute didn't do anything when a third party script changed the value of an input.Beta Was this translation helpful? Give feedback.
All reactions