How to UpperCase v-model of q-input?

[marconi]

I am creating a directive for this.

export default ({ Vue }) => {
    Vue.directive('uppercase', {
        update (el, binding, vnode) {
            el.value = el.value.toUpperCase()
        }
    })
}

I’m using:

<q-input
                    v-model="contato.nome"
                    class="text-uppercase"
                    dense
                    type="text"
                    outlined
                    placeholder="Nome"
                    float-label="Nome"
                    @blur="$v.contato.nome.$touch"
                    :error="$v.contato.nome.$error"
                    v-uppercase/>

But my element is not an input, console.log (el) return:

Console erro:

Cannot read property ‘toUpperCase’ of undefined

[arlecchino]

I think you have to query the correct element in the el tree.
el.getElementsByTagName(‘input’)[0].value = el.getElementsByTagName(‘input’)[0].value.toUpperCase();

[marconi]

@arlecchino Not work

[s.molinari]

This is a quick way. There are other methods, like creating a filter or a directive.

https://codepen.io/smolinari/pen/VwwpZWO?editors=1010

Scott

[metalsadman]

@marconi you can do @input="v => { contato.nome = v.toUpperCase() }"

[marconi]

@metalsadman said in How to UpperCase v-model of q-input?:

@input=“v => { contato.nome = v.toUpperCase() }”

I need aply in all inputs. What can I do ?

[marconi]

@s-molinari
I need aply in all inputs. What can I do ?

[metalsadman]

@marconi you should make a wrapper with that setup and use it wherever, or see @s-molinari 's suggestions.

[marconi]

@metalsadman Ok, thanks for your reply, I am sorry for my english.

[metalsadman]

@marconi here you go using Vue.extend https://codepen.io/metalsadman/pen/eYYvNNG?editors=1010

[marconi]

@metalsadman , this is a beautiful code. Thanks, I will add in my project

[marconi]

@metalsadman How can I registry this component global?

I added extensions.js in boot

import Quasar from 'quasar'
export default ({ Vue }) => {
    const CustomInput = Vue.extend({
        name: 'CustomInput',
        extends: Quasar.QInput,
        props: { upperCase: { type: Boolean, default: true } },
        watch: {
            value (v) {
                this.upperCase && this.$emit('input', v.toUpperCase())
            }
        }
    })
    Vue.component(CustomInput)
}

Modified quasar.config.js

    boot: [
        'i18n',
        'axios',
        'vuelidate',
        'auth',
        'extensions'
    ],

My input is empty

[metalsadman]

@marconi you have the idea of how to include it, just need some changes. should be import { QInput } from 'quasar', then just extends: QInput,, also provide a name in the Vue.component('CustomInput', CustomInput). then on your template you can just go <custom-input ... />. you can see it here https://0ybb3.sse.codesandbox.io/form-validations/external-vuelidate the bottom input.

full boot code:

import { QInput } from 'quasar'

export default async ({ Vue }) => {
  const CustomInput = Vue.extend({
    name: 'custom-input',
    extends: QInput,
    props: { upperCase: { type: Boolean, default: true } },
    watch: {
      value(v) {
        this.upperCase && v && this.$emit('input', v.toUpperCase()) // added a guard for value when it's null
      }
    }
  })
  Vue.component('CustomInput', CustomInput)
}

[marconi]

@metalsadman Good Job, thanks for help me.