Mask with computed bind keep backing to old format

[guilhermewaess]

In a form, with two options: Pessoa Juridica | Pessoa fisica

<input type="text" v-mask="cpfCnpjMask" v-model.lazy="plan.cpfCnpj" and more stuff for cnpj...>
<input type="text" v-mask="cpfCnpjMask" v-model.lazy="plan.cpfCnpj" and more stuff for cpf...>
computed:{
            cpfCnpjMask(){
                return this.isLegalPerson ? '99.999.999/9999-99' : '999.999.999-99';
            }
        },

the default mask will be '999.999.999-99'. when i change to Pessoa Juridica, the mask will update to '99.999.999/9999-99'. but on next change on value, the mask change again to '999.999.999-99'.

Here is a gif, should be better to understand

Is my mistake or really a unexpected behavior?

Thanks guys!

[caioincau]

Hi @guilhermewaess ,the mask pattern is parsed only on the bind off the component, you can`t change mask on the fly.

Do you have two text inputs ? You can`t make something like the example above?

<button @click="select('cpf')">CPF</button>
<button @click="select('cnpj')">Cnpj</button>
<input type="text" v-show="isCpf" v-mask="'999.999.999-99'" >
<input type="text" v-show="!isCpf" v-mask="'99.999.999/9999-99'" >

[guilhermewaess]

Well...my first try was something like that, but with the same result, the diference was that I used v-if instead v-show, because I dont need the element on dom if is another option, but in fact, there is not big deal use v-show in my case, and with v-show is working good

it is expected not work with v-show?

[caioincau]

I don`t think so can you provide a fiddle with the bug?

[guilhermewaess]

@iCaio Aw, sorry for the late aswer man!

Reproducing on fiddle, I found out that this error happened only on 3.9 version, my bad, after update on my project, worked like a charm with v-if :D thanks for you time buddy.

[caioincau]

@guilhermewaess No problems 👍 , I am happy that it's fixed for you 😄