How do I go about creating an always capitalized input in vue.js?

Question

I'm creating a form using vue.js and I need to create inputs in vue that is always capitalized. I know I could use the css property

text-transform: uppercase;

and then transform the data before sending using

data.someData.toUpperCase()

But I wonder if there is a more intelligent way of doing that in vue.js. In react we can create controlled inputs and easily do it. Is there anything like that in Vue.js?

I managed to do it using computed fields, however, I would have to create computed getter and setter for each input in the form. Is there a better way of doing it?

Answer 1

You could create a custom directive.

Vue.directive( 'touppercase', {
    update (el) {
        el.value = el.value.toUpperCase()
    },
})

And then use it where you need. For example:

<input type="text" v-model="modelfield" v-touppercase>

Answer 2

This directive works fine with v-model (last character is in upper case too):

Vue.directive('uppercase', {
  update(el) {
    const sourceValue = el.value;
    const newValue = sourceValue.toUpperCase();

    if (sourceValue !== newValue) {
      el.value = newValue;
      el.dispatchEvent(new Event('input', { bubbles: true }));
    }
  },
});

Usage:

<input type="text" v-model="myField" v-uppercase />

Answer 3

Since you don't have a lot of code to run, you should manually bind events to your textfield and then handle the uppercasing there.

Handling events from a text field can be done by adding an input event handler on them, and then updating the initial state again.

<input :value="text" @input="updateText($event.target.value)"/>

export default {
    data() {
        return {
            text: '',
        }
    },
    methods: {
        updateText(newValue) {
            this.value = newValue.toUpperCase();
        },
    }
}

You can also do it inline in a template, but this might make it harder to read depending on your code style preferences

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