Two way data binding does not work

[fredrickreuben]

I copy paste this <div x-data="{ raw: 2000 }"> <input x-mask.numeral x-mask:model="raw"> </div> from this link https://codetea.com/a-clean-integration-between-cleave-js-and-alpine/.

data property does not update, same as <div x-data="{ raw: 2000 }"> <input x-mask.numeral model="raw"> </div>

using Alpinejs v3.10.2

[ryangjchandler]

Try using x-model instead of x-mask:model.

[iambateman]

Hey, I ran into the same issue with Alpinejs v3.8.

Does not format the value (2000)

<div x-data="{ raw: 2000 }">
      <input x-model="raw" x-mask.numeral >
</div>

Does format the value (3,000)

<div x-data="{ raw: 2000 }">
       <input value="3000" x-mask.numeral >
</div>

[jgauna]

What if I want to disable this?

[clyer]

@fredrickreuben I ran into the same issue with Alpine.js 3.10.2. After investigating, I found it due to alpine.js loading x-mask before x-model. https://github.com/alpinejs/alpine/releases/tag/v3.10.2

• Broke it: https://github.com/alpinejs/alpine/pull/2857/commits/579fc43a71276a3127850f3104ed03cc8394765e
• Fixed it: https://github.com/alpinejs/alpine/commit/c31d62e853147ca436336c1098f1a820ae2fe195