vue2使用el-input-number 组件修改默认值为空,无法data中使用对象属性值作为绑定值!

437 阅读1分钟
<el-input-number v-model="num"></el-input-number>

在data中的num变量可以设置为undefined,来改变计步器的初始值为空,但是如果您的场景是在data中一个对象的属性值,例如:

`<el-input-number v-model="form.num"></el-input-number>`

绑定的是data中form对象的一个属性值,如果是这种使用场景,就无法绑定undefined来初始化为空了。 这个时候我目前有两种解决办法,使用change事件,绑定基本变量,然后去事件回调中赋值:

<el-input-number v-model="num" @change></el-input-number>
// data中的的num为undefined
data(){
    return{
        num:undefinded,
        form:{
            num:''
        }
    }
}
// 事件
change(val){this.form.num=val}

事件中这样就可以实现初始化为空,并在值改变时绑定上你需要的对象属性,但是注意!!!这里的chang事件需要输入框失焦才能监测到变化,触发change事件!第二种方式可以直接使用普通输入框,并添加校验:

<el-form-item label="数字输入框" prop="numberInput"> <el-input v-model="form.numberInput" placeholder="请输入数字"></el-input> </el-form-item>
// 校验:
numberInput: [ 
{ required: true, message: '请输入数字', trigger: 'blur' }, 
{ validator: (rule, value, callback) => {
    if (value && !/^\d+(\.\d{1,6})?$/.test(value)) {
        callback(new Error('请输入数字,小数点后最多六位'));
        } 
    else {
    callback();
    } }, trigger: 'blur',
  },
]

如果有问题或方式,请指正,谢谢啦!