Framework7 vue number format

Questions
1

Hi, I have struggled with input number format in framework7 vue

<template>
  <f7-page>
    <f7-list>
        <f7-list-input
            floating-label
            label="Number Formatted"
            type="text"
            placeholder="Number Formatted"
            info="Number Formatted"
            pattern="[0-9\.]*"
            validate
            required
            clear-button
           :value="numberFormat(number)"
           @input="updateNumber"
         />
    </f7-list>
    </f7-page>
</template>
<script>
import { mapState } from 'vuex';
import store from '@/store'

export default {
    data() {
          return {
          }
    },
    computed: {
        ...mapState('data', [
            'number'
        ])
    },
    methods: {
         numberFormat(value) {
            var formatter = new Intl.NumberFormat('id-ID');
            value = value.replace(/\./g, "");
            return formatter.format(value);
         },
         updateNumber(e){
             store.commit('data/updateNumber', e.target.value);
         }
    }
}
</script>

how to make number formatted like 1.000.0000 when displayed in input, but it gives 1000000 when get the value?

Thanks before.

2

This works without any issues for me:

<template>
  <f7-page>
    ...
    <f7-list>
      <f7-list-input
        type="text"
        label="Number Formatted"
        pattern="[0-9\.]*"
        validate
        required
        clear-button
        :value="numberFormatted"
        @input="number = $event.target.value"
      />
    </f7-list>
    ...
    
  </f7-page>
</template>
<script lang="ts">
  export default {
    data() {
      return {
        number: '1',
      };
    },
    computed: {
      numberFormatted(): string {
        const number = this.number;
        const formatter = new Intl.NumberFormat('id-ID');
        return formatter.format(number.replace(/\./g, ''));
      },
    },
  };
</script>
3

yes it works, but it’s quite laggy because of calling the mutation. do you have any suggestion? I call the mutation in input event

4

Not sure, maybe you should work with local value and call the mutation when you close that page/popup or whatever you use it in, or by hitting Save button