el-input显示值和value值不一样?

el-input显示值和value值不一样
image.png

阅读 8.8k
1 个回答

在vue中的事件是经过封装的,@input封装函数的参数$event就是绑定数据的数值,就像下面这样

image.png

对于@input.native封装函数的参数$event就是原生事件,就像下面这样

image.png

对于你的写法,函数中的value指向是环境中的value变量,如果环境中不存在该变量会抛出错误的,而你改变的也是环境中的变量value。

所以你可以用下面几种方法修改
1、使用@input直接修改accountSetting.amount

<el-input v-model="accountSetting.amount" 
    @input="accountSetting.amount = $event.replace(/[^\d]/g, '')"></el-input>

或者

<el-input v-model="accountSetting.amount" 
    @input="accountSetting.amount = accountSetting.amount.replace(/[^\d]/g, '')"></el-input>

2、使用@input.native直接修改accountSetting.amount

<el-input v-model="accountSetting.amount" 
    @input.native="accountSetting.amount = $event.target.value.replace(/[^\d]/g, '')"></el-input>

或者

<el-input v-model="accountSetting.amount" 
    @input.native="accountSetting.amount = accountSetting.amount.replace(/[^\d]/g, '')"></el-input>
<el-input v-model="accountSetting.amount" 
    @input.native="accountSetting.amount = $event.target.value.replace(/[^\d]/g, '')"></el-input>

3、把你的input事件去掉,改为监听accountSetting.amount,在回调中处理数据,再重新赋值回去,vue2的写法:

watch:{
    accountSetting.amount: function(value){
        this.accountSetting.amount = value.replace(/[^\d]/g, '')
    }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题