[Vuejs]-Convert input to uppercase in Vue.js

by

0👍

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>

Leave a comment