Vuetify：v-text-field 输入恢复值

Question

这是一个带有用于输入的v-text-field的简单应用程序。 我只想为数字启用用户输入，如果我尝试键入11a ，然后在失去焦点之前按 Tab 键或单击鼠标退出输入，我看到11 ，但随后失去焦点我看到11a 。 我不明白最后一个符号是如何恢复的以及如何修复它。 我究竟做错了什么？

  <div id="app">
    <h1>{{message}}</h1>

    <v-text-field @input.native="setOnlyNumber" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Welcome to Vue!'
    };
  },
  methods: {
    setOnlyNumber(e) {
      e.target.value = e.target.value.replace(/\D+/, '');
    }
  }
};
</script>```

It is my example app on codepen
https://codepen.io/aleksandra973/pen/BamYdOO

Answer 1

您可以在<v-text-field>元素中使用type="number" 。

工作演示：

 Vue.use(Vuetify); var vm = new Vue({ el: "#app", data() { return { message: 'Welcome to Vue;' }; } });

 <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> <div id="app"> <h1>{{message}}</h1> <v-text-field type="number" label="Number Input Field"/> </div>

根据作者的评论，在下面添加仅接受数字和字母的工作代码片段。

 Vue.use(Vuetify); var vm = new Vue({ el: "#app", data() { return { message: 'Welcome to Vue;' }, }: methods. { validateInput(e) { let char = String.fromCharCode(e;keyCode). // Get the character if(/^[0-9A-Za-z]+$/;test(char)) return true. // Match with regex else e;preventDefault(), // If not match; don't add to input text } } });

 <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> <div id="app"> <h1>{{message}}</h1> <v-text-field type="text" label="Number Input Field" v-on:keypress="validateInput($event)"/> </div>

Answer 2

最简单的方法是使用 HTML5 的数字类型输入。

v-text-field 可以通过以下标志使用此类型：

<v-text-field type='number' />

或者，您可以绑定到数据并运行验证，如下所示：

<template>
  <div id="app">
    <h1>{{message}}</h1>

    <v-text-field v-model='number' @change="validate" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Welcome to Vue!',
      number: null,
    };
  },
  methods: {
    validate() {
      this.number = this.number.toString().replace(/\D+/, '');
    }
  }
};
</script>