Search code examples
vuetify.jsvuetifyjs3maska

Mask /Vuetify 3 get raw value


I am trying to use maska with vuetify3 to mask a number. This works fine, but in the @update:model-value function I always get the formatted value. Can someone tell me, How I get the unformatted value?

<script setup lang="ts">
import { vMaska } from "maska/vue";
import {Mask} from "maska";


const emit = defineEmits([ 'update:modelValue']);

let props = defineProps({
  amount: {
    type: Number
  }
})

const options = {
  mask: '9.99#,##',
  tokens: {
    9: { pattern: /[0-9]/, repeated: true },
  },
  reversed: true
};
</script>
<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: 'CurrencyField',
});

</script>

<template>
  <v-text-field
    :model-value="props.amount"
    v-maska="options"
    @update:model-value="(value) => console.log(value)"
  />
</template>

<style scoped>

</style>

Solution

  • Have you tried with the directive with @maska event:

    <input v-maska data-maska="#-#" @maska="onMaska" />
    

    JS

    const onMaska = (event) => {
      console.log(event?.detail?.unmasked);
    }