vue.js - vuejs vuetify中v-text-field的首字母自动大写

Question

我正在尝试在 vuejs 中将 v-text-field 的第一个字母大写，但无法做到。这个怎么做？

当我输入图片中的文本时，第一个字母应该是自动大写。

标签： vue.jsvuetify.jscapitalization

Answer 1

另一种方法是使用watcher。每当firstName更改时都会触发。

    <template>
      <v-text-field v-model="firstName" label="First Name"></v-text-field>
    </template>

    <script>
    export default {
      data() {
        return {
          firstName: "",
        };
      },
      methods: {
        capitalizeFirstLetter: (str) => {
          return str.charAt(0).toUpperCase() + str.slice(1);
        },
      },
      watch: {
        firstName: function(newValue) {
          this.firstName = this.capitalizeFirstLetter(newValue);
        },
      },
    };
    </script>

代码沙盒示例