VUE.JS + Bootstrap - How to capitalize first letter in the same input

user_8851815 0
Viewed 12491

I would like get in input capitalize first letter when I'm starting write.

<b-form-input v-model="formSurname" id="Surname" name="Surname" placeholder="Surname" type="text" maxlength="50" required> </b-form-input>

I have also filter for this. But v-model="formSurname | capitalize" doesn't work I tried :value="formSurname | capitalize" but it doesn't work too

Vue.filter("capitalize", function (value) {
    if (!value) 
        return '';
    value = value.toString();
    return value.charAt(0).toUpperCase() + value.slice(1);
});

How to make an input to change my first letter in real time?

bootstrap-vue vuejs2 vue.js
2 Answers

If you need to store the value with the uppercase, use a computed property with set and get methods :

computed: {
 formSurnameCapital: {
    get: function () {
      return this.formSurname;
    },
    // setter
    set: function (newSurname) {
      if(newSurname.length < 1) {this.formSurname = ''; return}
      this.formSurname = newSurname.replace(/^./, newSurname[0].toUpperCase());
    }
  }
}

And in your template :

<b-form-input v-model="formSurnameCapital" id="Surname" name="Surname" placeholder="Surname" type="text" maxlength="50" required> </b-form-input>

Else, if is just about displaying it uppercase, you can simply use css :

.toCapitalFirst {
  text-transform: capitalize;
}
user_76290200

You can update the your formSurname on a keyup event in your methods

<b-form-input v-model="formSurname" id="Surname" name="Surname" placeholder="Surname" type="text" maxlength="50" required @keyup="formatSurname"> </b-form-input>

And in methods:

formatSurname() {
  if (this.formSurname) {
    this.formSurname = this.formSurname.toString()
    this.formSurname = this.formSurname.charAt(0).toUpperCase() + this.formSurname.slice(1)
  }
}
user_100335840
Related