uniapp中@input修改input内容不生效 | 过滤赋值无效 | 连续非法字符不更新的问题

场景

现需求限制输入框只能输入大小写字母.

实现方案: 绑定v-module=A, 监听@input=onA. 在onA中使用正则replace后赋值给A.

遇到问题: 当输入任意连续的非法字符时, 输入框不变. 直到输入一个合法字符非法字符才成功被过滤.

解决方案

伪代码

let A = ref('')

onA(e){
  const val = e.detail.value
  this.A = val // 关键在于这里, 需要使得其与之前的值不相同. 不能使用'', 否则如果输入的全是非法字符依旧没有变化
  const filtered = val.replace(/[^a-zA-Z]/g, '')
  this.$nextTick(() => {
    this.A = filtered;
  });

}

具体可参考官网. 查了好久资料, 简单来说就是一个陈年巨坑, 这框架一坑一个不吱声 😃