Combine q-select and q-cards
-
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?
-
Hi @omgwalt
you can use the filteredoptions
to display your card.
Something like this :
https://codepen.io/cp-tof06/pen/YzXdzoe -
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-styleIf 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 -
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!