v-mask not working correctly with veutify input
prabodhana opened this issue · comments
I'm using veutifyjs text-input to show phone number. I have a button to assign phone number to v-model. But after assign it not change there text input. if I enter some think on text-input v-mask work. But if I assign value to v-model it not working. Also i'm tying next trick but its not have any difference.
<v-text-field
v-model="form.phone_number"
v-mask="'(###) ###-####'"
dense
outlined
autocomplete="new-password"
hide-details="auto"
label="Phone Number"
placeholder="Phone Number"
></v-text-field>
<v-btn color="warning" @click="dataupdate()">Add</v-btn>
dataupdate() {
this.$nextTick(() => {
this.form.phone_number = '4032223344'
})
},
A workaround for this is to put a v-if on the Vuetify text field and toggle it after setting the model value like this:
<v-text-field
v-if="text_field_enabled"
v-model="form.phone_number"
v-mask="'(###) ###-####'"
dense
outlined
autocomplete="new-password"
hide-details="auto"
label="Phone Number"
placeholder="Phone Number"
></v-text-field>
this.form.phone_number = value;
this.text_field_enabled = false;
this.$nextTick(() => { this.text_field_enabled = true; });
It's a hack but the directive is not hooking to the model and listening for value changes correctly.
Try to use
this.$set(this.form, 'phone_number', '4032223344');
More details in Vue guide Reactivity in Depth
I think it is similar to 500
Could you solve it?
Everything is much simpler, I ran into it myself and decided.
The fact is that vuejs cannot understand when the state changes, or rather when to render the component again, and needs a little help for it.
It is enough to remember about the key. After assigning a new value, you need to change the key. Vue will notice that the key will change in the virtual tree and re-render part of the code.
Everything is much simpler, I ran into it myself and decided.
The fact is that vuejs cannot understand when the state changes, or rather when to render the component again, and needs a little help for it.
It is enough to remember about the key. After assigning a new value, you need to change the key. Vue will notice that the key will change in the virtual tree and re-render part of the code.
Using of v-bind:key solved the issue, great hint!
I have an equal code... but in my case I need to remove the mask, can anyone tell me how? thanks
Everything is much simpler, I ran into it myself and decided.
The fact is that vuejs cannot understand when the state changes, or rather when to render the component again, and needs a little help for it.
It is enough to remember about the key. After assigning a new value, you need to change the key. Vue will notice that the key will change in the virtual tree and re-render part of the code.
I want to share a very similar solution. There is a phone component and here we update the phone mask according to the selected country code. This is how I solved the problem. The mask was disappearing when the page was refreshed. I solved this problem with :key="phoneMask".
There's still a problem that I haven't been able to solve. Using :key the mask is loaded when setting a value directly in the model, but if I try to type in the field, it loses focus.
It only works in cases where the user cannot type in the field.