[v1.x] QCard not rendering properly



  • Hi, migrated from v0.17 to v1.x trying render QCard component and the QCardSection not render properly, this is the template:

    <template>
      <div id="login-bg" style="height: 100vh; width: 100vw">
      <div class="fixed-center">
        <q-card class="login-box">
          <q-card-section>
            <div class="text-center"><img src="~assets/logo_login.png" height="100px" width="250px" /></div>
          </q-card-section>
          <q-card-section>
            <div class="column">
              <div class="col q-mb-sm">
                <q-field
                  icon="person"
                  icon-color="black"
                  :error="$v.login.usuario.$error"
                  error-label="Debes ingresar tu nombre de usuario."
                >
                  <q-input
                    v-model="login.usuario"
                    float-label="Usuario"
                    clearable
                    @blur="$v.login.usuario.$touch"
                  />
                </q-field>
              </div>
              <div class="col q-mb-lg">
                <q-field
                  icon="lock"
                  icon-color="black"
                  :error="$v.login.clave.$error"
                  error-label="Debes ingresar la Contraseña"
                >
                  <q-input
                    v-model="login.clave"
                    type="password"
                    float-label="Contraseña"
                    clearable
                    @blur="$v.login.clave.$touch"
                  />
                </q-field>
              </div>
              <div class="col">
                <q-btn
                  color="black"
                  label="Ingresar"
                  :loading="btn_loading"
                  @click="Login()"
                >
                  <span slot="loading">Procesando...</span>
                </q-btn>
              </div>
            </div>
          </q-card-section>
        </q-card>
        <q-banner class="bg-red q-mt-md" v-if="AlertView">
          <template v-slot:avatar>
            <q-icon name="warning" color="warning" />
          </template>
          {{ AlertMsg }}
        </q-banner>
      </div>
      </div>
    </template>
    

    the result is:

    <div class="q-card login-box"></div>
    

    just a white box, nothing inside, no errors in console, auto-import auto.

    Quasar 1.4.1
    Quasar Extras 1.2.3

    Regards.



  • @enecumene don’t wrap q-input in q-field. it’s already wrapped in a q-field internally. https://codepen.io/metalsadman/pen/GRRXxZb?editors=1010

    and please refer to upgrade guide at components section https://quasar.dev/start/upgrade-guide#Components and QInput’s docs and examples https://quasar.dev/vue-components/input


Log in to reply