Active on `List Item` via active router?

  • I use List Item on sidebar.
    I would like to active item list via router active name???

    <q-list highlight>
      <q-list-header>Recent chats</q-list-header>
          <q-item-tile avatar>
            <img src="statics/boy-avatar.png">
        <q-item-main label="John Doe" />
        <q-item-side right>
          <q-item-tile icon="chat_bubble" color="green" />
        <q-item-side avatar="statics/linux-avatar.png" />
        <q-item-main label="Jim Doe" />
        <q-item-side right icon="chat_bubble" />
      <q-item-separator />
      <q-list-header>Previous chats</q-list-header>
        <q-item-side avatar="statics/guy-avatar.png" />
        <q-item-main label="Jack Doe" />

  • Now it work, I used q-scroll-area

          <q-scroll-area class="fit">
            <q-list-header>Left Panel</q-list-header>
            <q-item to="/showcase/layout-demo/play-with-layout">
              <q-item-side icon="account circle" />
                label="Play with Layout"
                sublabel="Learn more about it"

  • oh maybe problem with <q-item to="/".
    And then still have problem with item selected

  • Now I use redirect in Vue Router to break difference path

        path: '',
        redirect: { name: 'home' },
        path: '/home',
        name: 'home',
        component: Home,

  • use exact directive: <q-item clickable v-ripple to="/" exact>

  • worked like a charm @mortyspace !

Log in to reply