No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    q-item highlight selected item in V1 when using v-for

    Framework
    2
    3
    1242
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S
      stuffy last edited by

      Can someone guide on how to higlight the selected item when using v-for

      Unable to find anything related in docs. active-class works if without v-for

                    <q-list :padding="true">
                      <q-item
                        v-for="plan in plans.data"
                        :data="plan"
                        :key="plan.id"
                        clickable
                        @click="btn(plan.id)"
                        v-ripple
                        active-class="text-orange-10 mnu_active"
                        class="q-pb-md"
                      >
      
      1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman last edited by metalsadman

        Your not using active prop, item activates your active- class if active is true. https://quasar.dev/vue-components/list-and-list-items#Active-state

        1 Reply Last reply Reply Quote 0
        • S
          stuffy last edited by stuffy

          Awesome! @metalsadman you are a saviour every time I struggle with Quasar … Thank you so much!

                         <q-item
                            v-for="plan in plans.data"
                            :data="plan"
                            :key="plan.id"
                            :active="thisOrder.planId==plan.id"
                            active-class="text-orange-10 mnu_active"
                            class="q-pb-md"
                          >
          
          1 Reply Last reply Reply Quote 0
          • First post
            Last post