q-field & q-input issue on v1.1.0

mas

I’m trying q-field and q-input combination on v1.1.0:

      <q-field
      :value="username"
      class="col-12"
      label="lemail"
      id="emailField"
      filled >
        <template v-slot:control>
          <q-input  
          class="col-12"
          v-model="username" 
          clearable
          color="orange"
        />
      </template>
      </q-field>
      
      <q-field
       :value="username"
       label="password"
       id="passField"
       filled
       class="col-12">
        <template v-slot:control>
          <q-input
          class="col-12"
            v-model="password" 
            color="indigo"
            type="password"
            clearable
          />
        </template>
      </q-field>

And I have at least 2 issues so far. 1. double-inderline 2. double fill-box (from ‘filled’ property). Moving the ‘filled’ property from q-field to q-input component removes the second box, but the float-label floats up outside the fill-box boundary then. Removing the <template v-slot:control> wrapper fixes the double-undeline issue but I figure this is not the right way at all. Did anyine have similar issues?

I found a similar topic dealing with double-inderline after update but I’m using a brand new project.

s.molinari

QInput is already wrapped internally by QField. You shouldn’t need to wrap it again.

Scott

mas

Oh, my bad(( That’s written on pink…Thank you! I could do without q-field actually but I found that in the new version Quasar generates a custom id on every q-input element, like ‘id="qf_3061d64c-aa2d-4392-7fcf-6e019645a100’. With the previous Quasar version I used to add my own Id property either to QField or QInput which was very convenient to run quick tests. Adding my own id to QInput won’t overwrite the one genetated by Quasar (but it for works for QField). So I assume it’s not a good idea to attempt to do so at all as Quasar needs its own generated ID for better control over components…

mas

This post is deleted!