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

我试图在vuejs中将v-text-field的首字母大写,但无法执行。这个怎么做?

enter image description here

当我输入图片中的文字时,首字母应为自动大写。

评论
  • nsunt
    nsunt 回复

    I don't know if v-text-field supports v-model but I would update input when it loses focus.

    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>