3. q-item in q-drawer is missing

q-item in q-drawer is missing

  • N

    I called the data from state.js . other component calling the same data has no problems.
    No errors in console .
    here is my codes

    <div id=“mob”>
    <q-layout-drawer class=“lt-sm” side=“left” v-model=“leftDrawerOpen” content-class=“bg-grey-3”>
    <div class=“lt-sm”>
    <img alt=“Test Image” class=“responsive” :src=“bannerMain” width=“auto” height=“150” align=“right” style=“float:right”>
    </div>

        <div class="lt-sm">
      <q-toolbar class="responsive" style="height:100px; text-align:center; width:auto; ">
        <div id="flex-container-1">
          <div class="search" style="align:bottom; padding-top:20px; padding-bottom:20px; width:260px;">
            <q-search v-model="model" type="text" />
          </div>
        </div>
        <div class="icons" style="position:absolute; left: 210px; padding-bottom: 40px">
          <q-btn inverted size=14px flat round icon="account_circle" />
          <q-btn inverted size=14px flat round icon="mails" />
        </div>
      </q-toolbar>
    </div>

    <div class="list no-border platform-delimiter">
      <q-list>
        <q-scroll-area class="fit">
          <q-item-tile id="text-color" link v-for="link in links" v-bind:key="link.mob" :to="link.url">{{ link.title }}</q-item-tile>
        </q-scroll-area>
      </q-list>
    </div>
  </q-layout-drawer>
</div>
    0
  • N

    the q-tem-tile is not showing

    0
  • J

    Hi,

    You are missing the the QItem component and QItemTile is best suited for displaying side images.
    Try something like that:

    <q-list>
  <q-item v-for="link in links" :key="link.mob" :to="link.url">
    <q-item-main :label="link.title"/>
  </q-item>
</q-list>
    0
  • N

    this works for me
    <q-list>
    <q-item id=“text.color” v-for=“link in links” v-bind:key=“link.test” :to=“link.url”>{{link.title}}
    <!-- <q-item-main id=“text.color” :lable=“link.title”/> -->
    </q-item>
    </q-list>

    Thanks !:)

    0