在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/
帮助任何人?谢谢!
尝试一下:
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/