x-mask:dynamic="$money($input)" doesn't work in this case where as in a standalone POC it does work

[anjanesh]

x-mask:dynamic="$money($input)" works here :

<input
    type="text"
    :value="
        $store.global_data['total'] = (
            parseFloat(String($store.global_data['x']).replace(',', '')) +
            parseFloat($store.global_data['a'].replace(',', '')) +
            parseFloat($store.global_data['b'].replace(',', '')) +
            parseFloat($store.global_data['c'].replace(',', '')) +
            parseFloat($store.global_data['d'].replace(',', '')) +
            parseFloat($store.global_data['e'].replace(',', ''))
        ).toFixed(2)
    "
    x-mask:dynamic="$money($input)"
    disabled
/>

But the commas are not displayed in this case :

<input
    type="text" id="grand-total"
    :value="
        $store.global_data['grand_total'] = parseFloat(
            parseFloat(String($store.global_data['cloud_servers_total']).replace(',', '')) +
            parseFloat($store.global_data['managedServices_total'].replace(',', '')) +
            parseFloat($store.global_data['backup_total'].replace(',', '')) +
            parseFloat($store.global_data['disaster_total'].replace(',', '')) +
            parseFloat($store.global_data['transfer_total'].replace(',', '')) +
            parseFloat($store.global_data['others_total'].replace(',', ''))
        ).toFixed(2)
    "
    x-mask:dynamic="$money($input)"
    disabled
/>

If I remove parseFloat(String($store.global_data['cloud_servers_total']).replace(',', '')) it works (commas as displayed).

[ekwoka]

This is a mess.

Cns you clean this up?

Why are you doing so much float parsing and string replaces?

Why is this in a single expression?

What does the data actually look like?

[ekwoka]

Okay, so why not have the store have a getter on it?

{
   get grand_total() {
     return this.cloud_servers_total + this.managedServices_total + this.backup_total
   }
 }

And if they are numbers, store them as numbers, not strings.

There is no reason to put an assignment inside the value binding on the input element.

[anjanesh]

Thanks for the continued support to use getters and setters in JavaScript - I wasn't used this used to it at all.
I want to store as numbers but display commas in numbers - this is a most requested feature of all financial people.
For this partuclar case I have to let go off x-mask:dynamic="$money($input)" and return a formatted string of type Intl.NumberFormat and ad the same time save the number elsewhere in the getter method.

[ekwoka]

You don't need to save it anywhere.

You just use the getter.

Mask is meant for when the user inputs things.

It's not meant for you binding the value.

[anjanesh]

You don't need to save it anywhere - I'm using Alpine.store('global_data') to store the data into localStorage which has the values as numbers where as Alpine.store('local_data') as formatted strings and other data that I don't want shared across pages.

[ekwoka]

Yeah, that's likely a poor way to do it

But you just use the getter still, you don't need to store it at all...it will work fine when you load it back from local storage regardless. It doesn't need to be saved.