adding an id attribute to q-input

Question

Say I have the following q-input:

<q-input
    v-model="form.email"
    inverted-light
    color="white"
    stack-label="Email:"
    type="email"
    @blur="$v.form.email.$touch"
    :error="$v.form.email.$error"/>

I'd like to be able to make it so that if the domain of the email is mydomain.com that the form action will change to another website (without csrf protection) and the POST will be made to that website instead of the main one.

To do this I was thinking I could use jQuery. eg. $('#email').val().replace(/^.+@/, '') == 'mydomain.com' then change the form action and submit.

The only problem is: I don't know how to set an id attribute on q-input.

Any ideas?

Answer 1

As of early Quasar 1.4.2 (November of this year) you can specify the id value on the resulting html generated by q-input by using the "for" property (see the end of the behavior properties: https://quasar.dev/vue-components/input#QInput-API).

So, for example, you could add for="myInputId":

<q-input
    v-model="form.email"
    inverted-light
    color="white"
    stack-label="Email:"
    type="email"
    @blur="$v.form.email.$touch"
    :error="$v.form.email.$error"
    for="myInputId"
/>

The id attribute with value "myInputField" will end up on the resulting <input> element in your HTML.

Answer 2

Not using the "for" in the elements gave me a lot of headaches because the Jest snapshot generated random IDs