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

Question

我试图在 vuejs 中将 v-text-field 的首字母大写，但无法做到。如何做到这一点？

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

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 ? str[0].toUpperCase() + str.slice(1) : "";
        },
      },
      watch: {
        firstName: function(newValue) {
          this.firstName = this.capitalizeFirstLetter(newValue);
        },
      },
    };
    </script>