Convert input to uppercase in Vue.js

Question

I need to capitalize the input data of the model user.full_name. and if possible, should be written only in Latin letters

Vue js Uppercase

<p-input :value="value" @input="$emit('input', $event)" />

 <UIFormInput
          v-model="user.full_name "
          class="w-full"
          label="Full name"
 />

I have a lot of inputs. i need to uppercase some of them. more precisely the model is user.full_name. so I need help

Can you share, what you've already tried specifically to uppercase the input? — shaedrich, Dec 23 '21 at 10:51
thanks for answer for u. but i cant add other packages again to my project. its hard process to our server. so i need coding this problem only to v-model:user.full_name. how i can compose code ?? — Murodjon Umarov, Dec 23 '21 at 11:33
You could remove diacritics like this: https://stackoverflow.com/a/37511463/7451109 — shaedrich, Dec 23 '21 at 11:37
Not sure what would be different with a +1 package here. How does it change your process to a broken point here? — kissu, Dec 23 '21 at 12:01
the project we are doing is not a small project. so we need to optimize the amount of flour as much as possible — Murodjon Umarov, Dec 23 '21 at 12:06
Sure, you could write what is done in the transliteration package yourself but there's a reason why people use packages: The package developers tend to know what they're doing because this package specilizes on a specific topic and it is maintained which you'd have to do yourself then. — shaedrich, Dec 23 '21 at 14:29

score 0 · Answer 1 · answered Dec 23 '21 at 11:06

You just need to change this.value. And with the help of the npm package dzcpy/transliteration, you can transform the input letters to their latin counterparts.

new Vue({
  el: '#app',
  template: `<input :value="value" @input="onChange" />`,
  data() {
    return {
      value: ''
    }
  },
  methods: {
    onChange(evt) {
      this.value = transliterate(evt.target.value.toUpperCase());
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script
  async
  defer
  src="https://cdn.jsdelivr.net/npm/transliteration@2.1.8/dist/browser/bundle.umd.min.js"
></script>
<div id="app"></div>

Convert input to uppercase in Vue.js

1 Answers1