Need Help With x-mask

[reasecret]

I've a basic input like this:

<div class="w-full" x-data="">
<input wire:model.defer="budget" x-mask:dynamic="$money($input)" class="input input-bordered w-full" type="text" name="budget" id="budget">
</div>

I've already using alpine with this project and wanted to add mask plugin. Installed via npm and add this to my app.js:

import Alpine from 'alpinejs'
import mask from '@alpinejs/mask'
Alpine.plugin(mask)

But mask not working and there is no error on console. What am I doing wrong?

[reasecret]

Ok I found it. I'm using alpine 3.7.0 and mask plugin is 3.10.2. I've changed alpine version to 3.10.2 and its working now with empty input.

But there is another issue. When I open the edit/update page input value is formatting for one second and then value looks unformatted. Input value is coming from database and column type is decimal (8,2).

Here is an example:

[derylihs]

hello bro i found the fix problem by adding x-data attribute

according to this article

<div class="w-full" >
<input wire:model.defer="budget" x-data x-mask:dynamic="$money($input)" class="input input-bordered w-full" type="text" name="budget" id="budget">
</div>

https://justinbyrne.dev/blog/2022/5/22/masking-input-fields-with-alpinejs

hope it help

[alkadoHs]

Yes, very helpful. I was facing the same problem but after adding x-data to input it works now

[Juancjc]

his solved the version problem using x-data

[erickcomp]

I'm one more person helped by this good soul. Thank you!

The link went 404, but here's the wayback machine version:
https://web.archive.org/web/20220930213322/https://justinbyrne.dev/blog/2022/5/22/masking-input-fields-with-alpinejs/