v-mask not working correctly with veutify input

[Tharindu Praodhana]

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'
      })
    },

[David K. Hess]

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.

[Andrey]

Try to use
this.$set(this.form, 'phone_number', '4032223344');

More details in Vue guide Reactivity in Depth

[alanscordoba]

I think it is similar to 500

[alanscordoba]

Could you solve it?

[Gennady]

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.

[Alex Butikov]

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!

[patrikdereck]

I have an equal code... but in my case I need to remove the mask, can anyone tell me how? thanks

[Muhammed Erdinç]

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".

[Dgbsoft]

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.