I'am trying to add a v-text-input and I want the text in UPPERCASE ( in css: text-transform: uppercase ). I can't add a 'class', I can't add a 'style'. How do I do that? Things I tried:

 <v-text-field class="myUpperCase" v-model="dto" label="Username" required></v-text-field>
 <v-text-field style="text-transform: uppercase" v-model="dto" label="Username" required></v-text-field>

How do I achieve the uppercase on the text field? Thanks. /Yore

I'am trying to add a v-text-input and I want the text in UPPERCASE ( in css: text-transform: uppercase ). I can't add a 'class', I can't add a 'style'. How do I do that? Things I tried:

 <v-text-field class="myUpperCase" v-model="dto" label="Username" required></v-text-field>
 <v-text-field style="text-transform: uppercase" v-model="dto" label="Username" required></v-text-field>

How do I achieve the uppercase on the text field? Thanks. /Yore

• javascript
• vuejs2
• vuetify.js

• 1 should the v-model also only contain uppercase letters? – Thomas Commented Sep 12, 2018 at 15:18
• yes it must be, in fact. But I want visually UPPERCASE as well. – Yore Commented Sep 12, 2018 at 16:31

5 Answers 5

Because v-text-field wraps the input with other tags again and again. If you open the browser inspector, the structure will be like below:

<div class="v-input my-input v-text-field v-input--is-label-active v-input--is-dirty">
  <div class="v-input__control">
    <div class="v-input__slot">
      <div class="v-text-field__slot"><input type="text"></div>
    </div>
    <div class="v-text-field__details">
      <div class="v-messages">
        <div class="v-messages__wrapper"></div>
      </div>
    </div>
  </div>
</div>

If you'd like to use css to reach the goal, you need to use css selector to apply your styles like .my-input input:

PS: In below sample, class=my-input is placed in top level, not at input element. Your second approach which uses style="bla...bla.." will be there also.

new Vue({
  el: '#app',
  data: {
    value: 'test abc'
  },
});

.my-input input{
  text-transform: uppercase
}

<link href="https://fonts.googleapis./css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />
<link href="https://cdn.jsdelivr/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/vuetify.min.js"></script>

<v-app id="app">
  <v-text-field class="my-input" :value="value">
  </v-text-field>
</v-app>

Use the toUpperCase() function:

<input type="text" :value="name.toUpperCase()" @input="name = $event.target.value.toUpperCase()">

You are trying to add a v-model directive in the <v-text-field> ponent, v-text-field does support a v-model, but you have more control if instead you use the value prop, which you can use as an <input> tag. After all a v-model is just a bination of value and an event. So all you have to do is use the toUpperCase() function. Therefore, the solution I picture is:

<v-text-field type="text" :value="dto.toUpperCase()" @input="dto = $event.target.value.toUpperCase()">

The best solution is to use the masks of the v-text-field. You can specify whatever you want, i.e. for license plates of Spain you can type: mask="####AAA" which will put any CHAR in Capital letters. More info here: https://vuetifyjs./en/ponents/text-fields#

If you need the model to be Uppercase as well you can do a watch like this:

watch: {
  dto: function (val) {
     this.dto = val.toUpperCase();
  },
},

It worked for me, and seems simplier