uniApp @input事件更改输入框值,值改变了但是页面没更新新的值

复制代码
<uni-easyinput
                        type="text"
                        trim="all"
                        :inputBorder="false"
                        v-model="customFormData.completePercent"
                        @input="(val) => completeOnInput(val)"
                        placeholder="请输入" /> 

function completeOnInput(val) {
    let num = val.replace(/[^\d]/g, '')
    if (num > 100) {
        customFormData.value.completePercent = 100
    } else if (num < 0) {
        customFormData.value.completePercent = 0
    } else {
        customFormData.value.completePercent = num
    }
    console.log(customFormData.value.completePercent, 'customFormData.value.completePercent')
}

我想在页面输入值的时候同步更新页面上的数据,但是页面数据没更新,上述方法在pc端可以,但是在移动端上就不行,

解决办法:

复制代码
<!--方法一-->
<uni-easyinput
						type="text"
						trim="all"
						:inputBorder="false"
						:modelValue="customFormData.completePercent"
						@input="(val) => completeOnInput(val)"
						placeholder="请输入" />

<!--方法二-->
<uni-easyinput
						type="text"
						trim="all"
						:inputBorder="false"
						:modelValue="customFormData.completePercent"
						@update:modelValue="(val) => completeOnInput(val)"
						placeholder="请输入" />

为啥用v-model不行,但是用:modelValue可以呢,请参考下面文章

http://面试官:只知道v-model是modelValue语法糖,那你可以走了_v-model:modelvalue-CSDN博客

相关推荐
山河故人1634 小时前
基于 SSE 和分块传输的 Uniapp 微信小程序 实现 流式传输 对话
微信小程序·小程序·uni-app
不老刘6 小时前
Uni-app网络请求AES加密解密实现
网络·uni-app
洪洪呀6 小时前
uni-app vue3 实现72小时倒计时功能
vue.js·uni-app
王哈哈的学习笔记21 小时前
uniapp小程序使用echarts
前端·小程序·uni-app
yrldjsbk21 小时前
uniapp小程序开发入门01-快速搭建一个空白的项目并预览它
uni-app
JavaDog程序狗1 天前
【实操】uniapp纯前端搞个识别植物花草小程序
前端·vue.js·uni-app
七七小报1 天前
uniapp-商城-42-shop 后台管理 分包
前端·uni-app
七七小报1 天前
uniapp-商城-40-shop 购物车 选好了 进行订单确认4 配送方式3 地址编辑
uni-app
xuanjiong1 天前
微信小程序,基于uni-app的轮播图制作,调用文件中图片
微信小程序·小程序·uni-app
flying robot1 天前
uniapp: 低功耗蓝牙(BLE)的使用
uni-app