屏蔽的输入错误地获取数据

问题描述 投票:0回答:1

在Quasar框架中使用VueJS。

[每当使用带掩码的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/

帮助任何人?谢谢!

javascript node.js vue.js quasar-framework
1个回答
0
投票

尝试一下:

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/

© www.soinside.com 2019 - 2024. All rights reserved.