[v1.x] QCard not rendering properly

[enecumene]

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.

[metalsadman]

@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