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

Question

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

Answer 1

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

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

对于你的写法，函数中的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, '')
    }
}