[Vuejs]-How to use createAutoCorrectedDatePipe and createNumberMask feature from text-mask in vue?

by

0👍

Here is what worked for me:

  • I created the “createNumberMask” function in the “data()” section of the vue component

NumberMaskTestComponent.js file

import MaskedInput from 'vue-text-mask';
import createNumberMask from 'text-mask-addons/dist/createNumberMask';

export default Vue.component('number-mask-test-component', {
    name: 'NumberMaskTestComponent',
    data () {
        return {
            numberMask: createNumberMask({
                prefix: '$',
                allowDecimal: true,
                decimalLimit: 2, 
                integerLimit: 1
            }),
            testNumber: '123.3445'
        }
    },
    components: {
        MaskedInput
    }
})

NumberMaskTestComponent.vue file

<template>
    <div>

        <masked-input
            type="text"
            name="numberTest"
            class="form-control"
            v-model="testNumber"
            :mask="numberMask"
            :guide="false"
            placeholderChar="#">
        </masked-input>

    </div>
</template>

<script lang="ts" src="./NumberMaskTestComponent.js">
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
👤aero

Leave a comment