<template>
<uni-forms ref="RefUniForms" :rules="rules" :modelValue="formData" label-position="top" label-width="200px">
<uni-forms-item class="form-item" label="企业名称" name="companyName" required>
<uni-easyinput v-model="formData.companyName" trim placeholder="请输入营业执照上的名称"
@input="onInputChange($event,'companyName')" />
</uni-forms-item>
</uni-forms>
</template>
<script setup>
import {ref} from 'vue'
const formData = ref({
companyName: '', // 企业名称
})
function onInputChange(value, type) {
console.log('CreateCompany onInputChange value, type:', value, type)
if (type === 'email') {
return
}
// Regular expression to exclude emojis and special characters
const regEx = /[^\w\s\u4e00-\u9fa5。，！？、（）​``【oaicite:1】``​《》；：“”‘’]/gi;
// Remove emojis and special characters
value = value.replace(regEx, '');
formData.value[type] = value
}
</script>
2***@qq.com
- 发布：2025-12-12 16:44
- 更新：2025-12-12 16:45
- 阅读：26
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 10
HBuilderX类型： 正式
HBuilderX版本号： 4.87
第三方开发者工具版本号： 3.9.92.0
基础库版本号： 1.25.10
项目创建方式： HBuilderX
示例代码：
操作步骤：
输入 ! 后页面上的数据没有立即更新。
输入 ! 后页面上的数据没有立即更新。
预期结果：
立即更新
立即更新
实际结果：
未更新
未更新
bug描述：
uni-easyinpu @input 事件修改值后页面不立即更新数据，在input事件里更新数据，页面上不立即更新，再次输入后才更新上一回修改的数据。
但是后来发现，加上 nextTick 后就生效了。
async function onInputChange(value, type) {
// Regular expression to exclude emojis and special characters
const regEx = /[^\w\s\u4e00-\u9fa5。，！？、（）​``【oaicite:1】``​《》；：“”‘’]/gi;
// Remove emojis and special characters
value = value.replace(regEx, '');
await nextTick()
formData.value[type] = value
}
2 个回复
Ask小助手
该bug反馈内容基本完整：标题明确指出了问题核心，描述详细说明了现象（@input事件修改值后页面不立即更新，需二次输入才生效）及临时解决方案（使用nextTick）。代码示例完整可运行，包含uni-forms和uni-easyinput的典型用法。复现步骤简洁（输入!观察更新异常），预期结果合理（应实时更新），实际结果描述准确。分类信息提供了HBuilderX版本(4.87)和操作系统，但缺失关键目标平台信息（如Web/App/小程序），影响问题定位。
经分析，此非真实bug：问题源于Vue响应式机制特性。在事件处理函数中直接修改响应式数据时，Vue会合并更新并在nextTick周期批量渲染，这是预期行为而非缺陷。知识库uni-forms文档指出1.4.0后推荐使用onFieldChange替代setValue，且validateTrigger仅控制校验时机而非数据更新。用户同时使用v-model和手动赋值(formData.value[type]=value)造成冲突，属概念理解偏差。
建议：1) 移除手动赋值逻辑，仅用v-model自动同步；2) 若需过滤输入，应在计算属性中处理；3) 补充目标平台信息以便精准排查。无需官方修复，但可加强文档对Vue响应式原理的说明。
[已删除]
这是一个典型的 Vue 数据响应式更新问题。在 uni-easyinput 的 @input 事件中直接修改数据时，由于 Vue 的异步更新机制，可能导致视图未立即更新。使用
nextTick()可以确保在 DOM 更新后再执行数据修改，从而解决该问题。解决方案：使用nextTick()确保更新时序（如你已实现的方案）或者改用this.$set强制触发响应式更新：jsfunction onInputChange(value, type) { const regEx = /[^\w\s\u4e00-\u9fa5。，！？、（）《》；：“”‘’]/gi; this.$set(this.formData, type, value.replace(regEx, ''))}更多关于 Vue 响应式原理可参考：Vue 响应式原理内容为 AI 生成，仅供参考要回复问题请先登录或注册
公告
更多>相关问题