如何禁用输入类型编号上的所有点？ Vue.js 2

Question

我的html代码是这样的：

<div id="app">
  <input type="number" v-model="quantity"/>
</div>

我的 vue 组件是这样的：

new Vue({
  el: '#app',
  data: {
    quantity: ''
  },
  watch: {
    quantity (val) {
      this.quantity = val.replace('.', '')
    }
  }
})

演示和完整代码如下：https://jsfiddle.net/50wL7mdz/67375/

例如

我输入10.2，会自动变成102

如果我输入10..2，它不会自动成为102

所以如果多个点，它不起作用

我该如何解决这个问题？

Answer 1

因为你使用的是type="number"，所以浏览器在做一些内部处理，所以输入的value（绑定到你的变量）是一个数字，与盒子。

特别是，如果框中的文本不是有效数字，则内部值为空。当您键入一个“.”时，该值不会改变：10. 和 10 是相同的数值。当您键入第二个“.”时，该值变为无效，因此内部值为空。有点令人困惑的是，您在输入中输入的内容仍然可见，但 there is no way to get at it。

您的选择是停止使用type="number"，在这种情况下，您的代码将按照编写的方式运行（但您没有用于更改值的向上和向下箭头功能），或者做一些棘手的事情。

更新：通过强制使用规范化版本的号码，下面的解决方案效果相对较好。需要注意的是，每次进行更改时，光标都会移动到数字的末尾。你可以解决这个问题，但是it's somewhat complicated 所以我没有在这里做。

new Vue({
  el: '#app',
  data: {
    quantity: ''
  },
  computed: {
    ppQuantity: {
      get() {
        return this.quantity;
      },
      set(val) {
        this.quantity = '';
        this.$nextTick(() => {
          this.quantity = val.replace('.', '');
        });
      }
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <input type="number" v-model="ppQuantity">
</div>