vue.js - vue.js v-model on input 无法区分空输入和无效输入

Question

我正在尝试验证通过 v-model 连接到某些数据的输入标签上的某些输入数据（例如数字）。

问题是，如果我有无效数据（例如“1e”），数据将是“”。空输入显然也是如此。

如何区分空输入或无效输入？

var app = new Vue({
  el: "#app",
  data: {
    budget: "",
  },
  methods: {
    updateBudget() {
      // do some input validation here. E.g.
      if (this.budget === "") {
        console.log("This is triggered on both:");
        console.log("(1) empty input -> budget = ''");
        console.log("(2) invalid input, e.g. -> budget = '1e'");
        console.log("Problem: I can't split this in the above cases!");
      };
    },
  },
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id="app">
  <input v-model="budget" type="number" placeholder="Budget" min="0" step="0.01" @input="updateBudget" />
</div>

我会很感激一个提示。谢谢

标签： vue.jsv-model

Answer 1

1e 不是数字（也是 +、-）。输出为空，因为它不是有效数字，尝试插入 1e0 或 -1，您将能够捕获该值。有一些相关的问题：

• 这正是规范所说的。
• 如何防止多余的字符

要获取确切的数字而不用担心“e”，请使用内部 Vue 实现。它会处理这种情况。(v-model.number)

<input
    v-model.number="budget"
    type="number"
    placeholder="Budget"
    min="0"
    step="0.01"
    @input="updateBudget"
/>

顺便说一句，如果你想明确地检查'e'，我认为，最好使用'type=text'。