i have one field with the mask and other without. But i see a mask in the second field

[tarzanpasha]

I have some problem. My form have fields and radio button. When I switch the radio button to the value 1 then the first field appear on the form. When i choose anoder value - the second field appear on the same place of the first field and the first field dissapears.

But i see that the second field have the same mask as the first but it must not be so! the first field:

I used v-mask="##########' only on the first field. How could it happen that the second field behaves as the the field with the mask?

[vhoyer]

could you submit a minimum reproduction, perhaps on codesandbox? for us to take a look at your problem?

[qbound]

I have the same problem. Is there a way to remove the mask from a field? The masked field is 'dynamic' via v-if. Maybe this is the problem?

[qbound]

a small fix is to wrap your masked field into a seperate div. That worked for me :)

[schel4ok]

I have the same problem and each field is separated inside div. But it doesn't help. I use one ModalForm component for 2 type of forms - one with email and another without email. When I call form with email I see that phone mask is applied to phone and email fields. But in vue code I have only one mask for phone field. And I don't see any vue error in console or vue-devtools. So for the moment I decided not to use mask.

          <div class="modal-body">
              <input type="hidden" class="form-control" name="currentUrl" :value="currentUrl">

              <div class="form-control-group">
                <div class="error" v-if="!$v.name.required">Введите имя</div>
                <div class="error" v-if="!$v.name.minLength">Имя должно содержать минимум {{$v.name.$params.minLength.min}} буквы.</div>
                <div class="error" v-if="!$v.name.cyrillic">Имя должно состоять только из русских букв</div>
                <input type="text" class="form-control" name="name" placeholder="Ваше имя" :class="{ 'form-control--error': $v.name.$error }" v-model.trim="$v.name.$model">
              </div>

              <div v-if="AskProduct" class="form-control-group">
                <div class="error" v-if="!$v.email.required">Введите email</div>
                <div class="error" v-if="!$v.email.email">Введите существующий email</div>
                <input type="text" class="form-control" name="email" placeholder="Ваш e-mail" :class="{ 'form-control--error': $v.email.$error }" v-model.trim="$v.email.$model">
              </div>

              <div class="form-control-group">
                <div class="error" v-if="!$v.phone.required">Введите номер телефона</div>
                <div class="error" v-if="!$v.phone.minLength">Телефон должен содержать {{$v.phone.$params.minLength.min}} цифр.</div>
                <input type="tel" class="form-control" name="phone" placeholder="Ваш телефон" :class="{ 'form-control--error': $v.phone.$error }" v-model.trim="$v.phone.$model" v-mask="'+# (###) ###-##-##'">
              </div>

              <div v-if="AskProduct" class="form-control-group">
                <textarea type="text" rows="3" class="form-control" name="question" placeholder="Ваш вопрос"></textarea>
              </div>
          </div>

[vhoyer]

have you tried using the inputs with an unique "key" property? sometimes Vue has problems determining which element is which, and generally using a key helps (like when you do a v-for you have to use the key, you know?)

[vhoyer]

but them again, any reproduction links?

[schel4ok]

No I never heard about unique "key" property for inputs. You mean I need to do like that?

<input type="hidden" class="form-control" name="currentUrl" :value="currentUrl"  key=1>
<input type="text" class="form-control" name="name" placeholder="Ваше имя" :class="{ 'form-control--error': $v.name.$error }" v-model.trim="$v.name.$model" key=2>
<input type="text" class="form-control" name="email" placeholder="Ваш e-mail" :class="{ 'form-control--error': $v.email.$error }" v-model.trim="$v.email.$model" key=3>
<input type="tel" class="form-control" name="phone" placeholder="Ваш телефон" :class="{ 'form-control--error': $v.phone.$error }" v-model.trim="$v.phone.$model" v-mask="'+# (###) ###-##-##'" key=4>

[vhoyer]

yeah, if using key would help your case, the code you pasted here should do the trick. If the error continues, propbably the key will not help in this case

[schel4ok]

Yes. "key" property for inputs helped me. Thanks

[krivunets-eu]

"key" property helped me to fix it too, thanks