Mask is not applied on a async update

[michelveloso]

Hello, when I update a model via promise or setTimeout for example, the mask is not applied

<Input
    type="text"
    name="cnpj"
    class="form-control form-control-lg form-control-solid"
    placeholder="CNPJ"
    v-model="agentAccountDetailForm.cnpj"
    v-maska="'##.###.###/####-##'"
  />

const agentAccountDetailForm = ref<IAgentAccountDetailForm>({
      cnpj: "",
    });

It's Working using this way:

agentAccountDetailForm.value.cnpj = '11111111';

Not Working using this way:

setTimeout(() => {
      agentAccountDetailForm.value.cnpj = '11111111';
    }, 20)

Not working using this way:

watchEffect(()  => {
      const company = currentAgentAccountDetail.value.company;
      agentAccountDetailForm.value.cnpj = company?.cnpj;
    });

is it possible to force the update of an element's mask?

[lunt1k]

@michelveloso did you find a solution to this?

[builder555]

I wonder if it's because the 'input' event isn't triggered in this case? https://github.com/beholdr/maska/blob/master/src/maska.js#L42

in any case this answer might be a workaround for now

[oraculum]

This is my solution in VUE composition API.

template

<input v-model="account.cpfCnpj" v-maska="'##.###.###/####-##'" class="form-control" id="cnpj" type="text" />

script

import { mask } from 'maska';
import { ref, watch } from 'vue';

const account = ref({
  name: '',
  phone: '',
  mobilePhone: '',
  address: '',
  addressNumber: '',
  complement: '',
  province: '',
  postalCode: '',
  cpfCnpj: '',
});

watch(() => account.value.cpfCnpj, (newValue) => {
  account.value.cpfCnpj = mask(newValue, '##.###.###/####-##');
});

I followed tip @beholdr in post mentioned by @builder555

Used Watch in account.cpfCnpj and solved!