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

    Combine q-select and q-cards

    Framework
    3
    4
    390
    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.
    • O
      omgwalt last edited by omgwalt

      I’ve got Text Autocomplete using q-select accessing my customer list based upon https://quasar.dev/vue-components/select#Example--Text-autocomplete

      I’ve also got some q-cards accessing the same customer list displaying each customer in a separate card based upon https://quasar.dev/vue-components/card#Example--Basic-cards

      What I want to do is to combine the two features together so that when the user narrows down the items in the customer list by typing a few letters of the customer’s name, and then the user chooses the one that matches their request from the drop-down, the q-cards list will similarly filter down to the same selected item.

      Can someone please give me an idea of how to go about doing this?

      1 Reply Last reply Reply Quote 0
      • T
        tof06 last edited by

        Hi @omgwalt
        you can use the filtered options to display your card.
        Something like this :
        https://codepen.io/cp-tof06/pen/YzXdzoe

        1 Reply Last reply Reply Quote 0
        • ahiguita
          ahiguita last edited by

          Hi @omgwalt

          I think that the best way is use q-table, check this sample: https://codepen.io/nomada86/pen/gOpZpEm?editable=true&editors=101
          You can custom the card if you want https://quasar.dev/vue-components/table#Grid-style

          If this not working for you, then you will need use code, I build a simple sample, check: https://codepen.io/nomada86/pen/zYGyvBO
          You will need work in this code

          1 Reply Last reply Reply Quote 1
          • O
            omgwalt last edited by omgwalt

            Thanks guys. I checked out both of your suggestions!

            @eurus-pro I really like what you shared. It matches what I had in mind very, very well. I especially like that first solution a lot! Thank you again!

            1 Reply Last reply Reply Quote 0
            • First post
              Last post