Element: [Bug Report] v-model.number cannot enter decimal points

[lmwdtzs]

Element UI version

2.5.4

OS/Browsers version

win7 64位;Chrome v70.0.3538.110

Vue version

2.6.5

Reproduction Link

https://jsfiddle.net/lmwdtzs/eL6k0387/1/

Steps to reproduce

第一个el-input，输入数字后，无法在数字末尾输入小数点，只能在数字中间输入小数点
第二个原生input，可以正常输入小数点

What is Expected?

el-input的v-model.number可以正常输入小数点

What is actually happening?

数字末尾无法输入小数点，只能在数字中间输入小数点，影响体验且用户一般无法发现如何输入小数点

[element-bot]

Translation of this issue:

Element UI version

2.5.4

OS/Browsers version

Win7 64 bits; Chrome v70.0.3538.110

Vue version

2.6.5

Reproduction Link

https://jsfiddle.net/lmwdtzs/eL6k0387/1/

Steps to reproduce

The first el-input, after entering the number, can not enter decimal point at the end of the number, can only enter decimal point in the middle of the number.

The second native input, which can normally enter decimal points

What is Expected?

V-model. number of el-input can input decimal point normally

What is actually happening?

The decimal point can not be input at the end of the number, but only in the middle of the number, which affects the experience and the user generally can not find out how to input the decimal point.

[lmwdtzs]

[email protected]还是正常的，新版会有这个问题

[xiongsongsong]

我也遇到了，正准备提issue。

[wacky6]

请不要在el-input的v-model上用修饰符（包括lazy、number、trim）

要实现功能请自行处理input事件

[xiongsongsong]

@wacky6 那为什么以前可以用？为什么出了问题后，文档中也没有说明？

[xiongsongsong]

v-model.number是vue自带的功能，并且这个这在两年内一直稳定，用的好好的，突然就被 @wacky6 说不要用。

image

要求Reopen此issue。

[goforward01]

遇到同样的问题，带有number修饰的组件，升级完之后突然发现无法输入小数点

[xinlv123]

Same issues here! Hope this will be fixed soon.

[lyc2014]

设置type="number"就可以输入了

[FoooooooF]

可以使用回2.3.7版本

[sandeshgb]

<el-input v-model="postForm.minimumAmount" name="minimumAmount" required placeholder="Minimum Amount" type="number" /> worked for me even for decimal

[C-Powers]

@sandeshgb This technically doesn't work. It will allow you to use a decimal, but when I tried, it actually turns off/overrides element's form validation.

My workaround was to just create a custom validator (BOO).

<el-form-item
              prop="insuredValue"
              :rules="{
                validator: numberValidation,
                message: $t('errorNumber', {
                  subject: $t('insuredValue')
                }),
                trigger: 'change'
              }"
              ><el-input
                :placeholder="$t('insuredValue')"
                v-model="forms.insuredValue"
              >
              </el-input>
            </el-form-item>

numberValidation(rule, value, callback) {
      if (isNaN(+value)) {
        callback(new Error());
      } else {
        callback();
      }
    }

[syd192]

<el-input type="number" v-model.number="inputVal"></el-input>

set type && .number is OK🙆

[angrilove]

Why cannot support v-model modifer?

[hjj5258]

在框架迁移1.x 到2.x 中 应说明情况，更新日志并没有说明这一点。

[fanchong02]

降级到较近的老版本~