Get raw value by setting prop instead by event

[maico910]

Maybe is better using prop to get raw value like Quasar mask input example, because in some cases we need to use only the raw value, but to use we need to create another variable to just get the masked value and listening for the event

[mfillon]

I agree, in many cases, we just want the mask to be a visual help while typing the value. But we want to keep the raw value in the model. An additional prop would be great.

The workaround I use for now :

<input ...
    v-model="modelValue" //or :value="modelValue"
    v-maska="mask"
    @maska="modelValue = $event.target.dataset.maskRawValue">

[beholdr]

Please see docs for new v2 version, it has value binding

[mfillon]

Hey @beholdr, Thanks for the great work on this v2. After playing around, though, I still don't see a convenient way to do it in Vue.

The way I understand will still look like :

<input ...
  v-model="unmaskedValue"
  v-maska
  :data-maska="mask" //not sure if this is needed?
  @maska="unmaskedValue = $event.detail.unmasked"

Or am I missing something?

[5e]

@mfillon Have you found a better solution? Was facing the same issue and doing something similar but in a seperate method when moving away from the page but unsure if there's a cleaner solution.

Although the snippet you posted doesn't fully work for me as I assume the v-model and the event are conflicting, so I'm still just getting the masked value stored. Removing the v-model makes this work, but then it leads to other issues for me when navigating pages/components in a form.

[Philword]

Omg I spent 2 hours trying to figure out how to get raw value and still 0 progress. In my input I don't use v-model, only "name" prop because of vee-validate. How to get a raw value, can I get it anyhow with just a prop?

[mfillon]

@5e Nope, maybe using :value="unmaskedValue" instead of v-model would work better in the snippet.

@beholdr Can you tell us how you would do it with the v2? Is the snippet I provided the way to go?

[beholdr]

If you don’t use v-model, you can use events to get raw value.

[mfillon]

If you don’t use v-model, you can use events to get raw value.

@beholdr Is there a way to do it with v-model while keeping the raw value?

[beholdr]

@mfillon yes, with v-model you can get a raw value as showed in the docs

[mfillon]

From the doc, I read To get masked value you can use standard v-model directive. But if you want to access an unmasked (raw) value, you can pass a variable as v-maska directive value.. Which implies that v-model only refers to the masked value, and that the v-maska object (which is not the model) can contain the unmasked value.

In real world app, you would have a model, let's say a user with a phoneNumber field and let's say we want to keep this model value raw but displayed with mask.

The way I see it, you'll have to keep something in sync manually anyway, either by creating a maska object assigned to v-maska, but then you need to watch the maska object to replace your model value with unmasked or using @maska event.

@beholdr Is that correct or am I missing something?

[beholdr]

@mfillon yes, if you want to bind a v-model to the raw property directly, it's impossible.

[rodrigorodriguescosta]

Having the same issue here, it should have the same feature like mentioned here unmasked model, changing the model is not a good approach, usually we need to mask only visually

I'm thinking to start using quasar for masked input due this issue https://quasar.dev/vue-components/input/#example--unmasked-model