Question

我有一个文本输入，允许用户键入一个小数点后最多3位的数字：

<v-text-field type="text" :value="num" @change="changeNum($event)" />
<p>{{ num }}</p>

...

export default {
  data: () => ({
    num: 0
  }),
  methods: {
    changeNum(e) {
      let v = parseFloat(e);
      if (!isNaN(v)) {
        this.num = parseFloat(v.toFixed(3));
      }
    }
  }
};

如果我输入'123.456'，则输入num = 123.456。如果我输入了文本'789'，则输入将包含123.456789但包含num = 123.456。因此，用户可能认为更改已应用，但事实并非如此。

如果changeNum失败，如何强制输入更新？

Answer 1

@change在将焦点更改为其他内容之前不会触发。为确保您在输入时评估输入，请改用@input。每次击键都会触发。

此外，请跟踪最后一个值，以便您可以重置：

<v-text-field type="text" :value="num" @input="changeNum($event)" />
<p>{{ num }}</p>

...

export default {
  data: () => ({
    num: 0,
    lastNum: 0
  }),
  methods: {
    changeNum(e) {
      let v = parseFloat(e);
      if (!isNaN(v)) {
        this.num = parseFloat(v.toFixed(3));
        this.lastNum = this.num;
      }
      else {
        this.num = this.lastNum;
      }
    }
  }
};

Answer 2

您可以通过在离开文本字段后仅使用while n>0:来更改数据，并使用v-model.lazy属性来保存旧值和新值来实现用例，该属性使我们可以将焦点放在某个地方后控制键入的值其他。

watch

new Vue({
  el: '#app',
  data: () => ({
    num: 0
  }),

  watch: {
    num(newv, oldv) {
      let v = parseFloat(newv);
      if (!isNaN(v)) {
        this.num = parseFloat(v.toFixed(3));
      } else {
        this.num = oldv;
      }

    }
  }
})

#app {
  padding: 20px;
}

Answer 3

我认为$forceUpdate应该可以解决您的问题。

methods: {
    changeNum(e) {
      let v = parseFloat(e);
      if (!isNaN(v)) {
        this.num = parseFloat(v.toFixed(3));
        this.$forceUpdate();
      }
    }
}

如果模型拒绝更改，则恢复输入值

3 个答案: