force input form enter uppercase to backend in vue.js

Question

I've tried to input 'a001', the display will show 'A001' because the CSS rule. What's the proper/best way to convert it to uppercase before passing to backend?

new Vue({
  el: '#app',
  data: {
    myid: ''
  },
  methods: {
    click: function() {
      console.log('clicked id=', this.myid)
    }
  }
});

div input {
  text-transform: uppercase
}

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<div id="app">
  <input type="text" v-model="myid" placeholder="My ID" />
  <button type="button" @click="click">Submit</button>
</div>

Answer 1

Custom directive:

Vue.directive("uppercase", {
    update: function (el) {
        el.value = el.value.toUpperCase()
    }
})

<input type="text" v-model="myid" placeholder="My ID" v-uppercase/>

Answer 2

The simple way without any computed or $event

<v-text-field
   v-model="batchNo"
   label="Batch Number"
   @input="(val) => (batchNo = batchNo.toUpperCase())"
   >
</v-text-field>

Here a text-field from Vuetify is being used but you can use it with an HTML input as well.