在 uni-number-box 输入数量,页面显示值修改了,但实际上打印时还是原来的值
代码如下:
<template>
<view class="content">
<view class="flex">
<view>商品数量:</view>
<uni-number-box ref="numberBox" background="#ffffff" v-model="quantity" :min="1" :max="999999999"
@change="handleChange" @blur="handleBlur" />
<view class="btn" @tap="handleSubmit">结算</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
quantity: 1
}
},
methods: {
handleChange(value) {
setTimeout(() => {
console.log('当前输入的值:' + value);
console.log('实际上的值:' + this.quantity);
})
},
handleBlur(e) {
if (!e.detail.value || e.detail.value == '') {
this.quantity = 1
}
},
handleSubmit() {
uni.showToast({
title: '数量为:' + this.quantity,
icon: 'none',
duration: 3000
});
}
}
};
</script>
<style scoped>
.content {
padding: 20rpx;
background-color: skyblue;
}
.flex {
display: flex;
justify-content: space-between;
}
.btn {
width: 80rpx;
height: 50rpx;
text-align: center;
line-height: 50rpx;
background-color: #fff;
color: black;
}
</style>
效果如图:
解决办法:
1.1 在change事件中手动赋值
handleChange(value) {
setTimeout(() => {
this.quantity = value;
console.log('当前输入的值:' + value);
console.log('实际上的值:' + this.quantity);
})
}
1.2 修改 uni-number-box 组件代码
由于操作加减按钮没有这个问题,所以我们先看看加减按钮绑定的事件
_calcValue(type) {
if (this.disabled) {
return;
}
const scale = this._getDecimalScale();
let value = this.inputValue * scale;
let step = this.step * scale;
if (type === "minus") {
value -= step;
if (value < (this.min * scale)) {
return;
}
if (value > (this.max * scale)) {
value = this.max * scale
}
}
if (type === "plus") {
value += step;
if (value > (this.max * scale)) {
return;
}
if (value < (this.min * scale)) {
value = this.min * scale
}
}
this.inputValue = (value / scale).toFixed(String(scale).length - 1);
this.$emit("change", +this.inputValue);
// TODO vue2 兼容
this.$emit("input", +this.inputValue);
// TODO vue3 兼容
this.$emit("update:modelValue", +this.inputValue);
}
我们可以看到这样一行代码
this.$emit("update:modelValue", +this.inputValue);
因为在 uni-number-box 中,并没有直接使用 props 传入过来的变量,而是用的变量 inputValue ,这行代码的作用则是在值变动时候,实现数据的双向绑定。
我们再看看 blur 事件中,并没有这样一行代码,我们自己加上就可以啦
扫描二维码关注公众号,回复:
14741978 查看本文章
_onBlur(event) {
this.$emit('blur', event)
let value = event.detail.value;
if (!value) {
// this.inputValue = 0;
return;
}
value = +value;
if (value > this.max) {
value = this.max;
} else if (value < this.min) {
value = this.min;
}
const scale = this._getDecimalScale();
this.inputValue = value.toFixed(String(scale).length - 1);
this.$emit("change", +this.inputValue);
this.$emit("input", +this.inputValue);
this.$emit("update:modelValue", +this.inputValue); // 加上这行代码就可以啦
}