Маскированный ввод получает данные неправильно - PullRequest
Новая
       5

Маскированный ввод получает данные неправильно

0 голосов
/ 10 февраля 2020

Использование VueJS с платформой Quasar.

При использовании маски q-input значение становится неверным после переключения.

Например, если у меня значение по умолчанию: 

officeNum: 654321,
mobileNum: 12345678,

Тогда у меня есть этот код: 

<div v-if="showOfficeNum">
  <q-input id="officeNum" outlined clearable clear-icon="close" v-model="officeNum" label="Office Number" mask="###-###"/>
</div>
<div v-if="showMobileNum">
  <q-input id="mobileNum" outlined clearable clear-icon="close" v-model="mobileNum" label="Mobile Number" mask="##-###-###"/>
</div>

<q-btn label="Change Displayed Info" color="primary" @click="updateBoolean"></q-btn>

Он будет отображаться:

Номер мобильного телефона как 12-345-678

Затем после нажатия кнопки «Изменить отображаемую информацию», она будет отображать:

Номер офиса как 654-321

Но при повторном нажатии «Изменить отображаемую информацию» поведение становится неправильным: номер мобильного телефона теперь отображается как 12-345-6 вместо 12-345-678, как это было изначально.

JSFiddle здесь: https://jsfiddle.net/qkxawe81/

Помогите кому-нибудь? Спасибо!

1 Ответ

0 голосов
/ 10 февраля 2020

Попробуйте это: 

new Vue({
  el: '#q-app',
  data: function () {
    return {
      version: Quasar.version,
      officeNum: '',
      mobileNum: '',
      showMobileNum: true,
      showOfficeNum: false
    }
  },
  beforeMount: function() {
      this.officeNum = '654321',
      this.mobileNum =  '12345678'
  },
  methods: {
    updateBoolean() {
	    this.showOfficeNum = !this.showOfficeNum
      this.showMobileNum = !this.showMobileNum
    }
	}
})

Рабочий код можно посмотреть здесь: https://jsfiddle.net/f5wja3xs/2/

...