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（绑定到您的变量）是一个数字，并且与它不完全相同方框中的文字。

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

您的选择是停止使用type="number"，在这种情况下，您的代码将按照书面形式运行（但您不具备用于更改值的向上和向下箭头功能），或执行某些操作棘手。

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

＆＃13;

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

＆＃13;

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <input type="number" v-model="ppQuantity">
</div>

＆＃13;

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

1 个答案: