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

Question

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

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

Answer 1

我不知道 v-text-field 是否支持 v-model 但我会在失去焦点时更新输入。

var app = new Vue({
  el: "#app",
  data() {
    return {
      text: '',
    }
  },
  methods: {
    capitalize() {
      const [firstLetter, ...rest] = this.text.split('');
      const upperCaseLetter = firstLetter.toUpperCase();
      
      if (firstLetter === upperCaseLetter) {
        return;
      }

      this.text = firstLetter.toUpperCase() + rest.join('');
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input v-model="text" type="text" @blur="capitalize" placeholder="Enter text">
</div>

Answer 2

另一种方法是使用 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>

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

First letter auto capitalizing of v-text-field in vuejs vuetify

capitalization

vue.js

vuetify.js