CODEWITHSUNDEEP
vue.jsvuetify.jscapitalization
TB13
TB13

Reputation: 387

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

I am trying to captitalize first letter of v-text-field in vuejs but unbale to do. How to do this?

enter image description here

first letter should be auto capital when i am input text like in pic.

Upvotes: 3

Views: 4985

Answers (2)

discolor
discolor

Reputation: 1396

Another way would be to use a watcher. This triggers whenever firstName is changed.

    <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>

Upvotes: 2

J&#243;zef Podlecki
J&#243;zef Podlecki

Reputation: 11305

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>

Upvotes: 0

Related Questions