el-input-number 用户清空内容如何展示默认值?Display default value after user cleared the input.
towry opened this issue · comments
Towry Wang commented
现象:el-input-number
清空内容后,输入框展示为空,但是我们可能需要展示默认的值,比如数字 1。
解决办法:
<template>
<el-input-number v-model="change" step-strictly :step="1" :min="1" :max="max" @input="onAmountChange" />
</template>
<script>
export default {
data() {
return {
change: 1,
}
},
methods: {
onAmountChange(value) {
if (!this.change) {
// el-input-number has a watcher for the value, but at this case, the value is still "1" in the component.
// so we need let `el-input-number` knows the value changed.
this.change = null;
// change the value.
this.$nextTick(() => this.change = 1 );
}
}
}
}
</script>
We need let the el-input-number
knows the value has changed because clear the input will not change the value, so we use nextTick to change the value.