Learn Quasar Components - QSelect

Поделиться
HTML-код
  • Опубликовано: 24 ноя 2024
  • Want more? 🎥
    quasarcast.com...
    Listen to the QuasarLife podcast 🎙️
    quasarcast.com...
    Catch me on Twitter 🐦
    @LukeDiebold
    Hit me up on Discord 💬
    ldiebold#0365
    Shoot me an email 📨
    luke@quasarcast.com

Комментарии • 57

  • @brianoflondon
    @brianoflondon Год назад +1

    Absolutely brilliant video. Essential. I wish this was on the top of the docs for q-select because it would have saved me a ton of time.

  • @alexander2576
    @alexander2576 Год назад +1

    Thank you so much, Luke! It is so pleasant to learn Quasar with you. You rock! You have a great vibe! )) And you show important things like autocomplete with select and backend fetch. Awesome! Hopefully this year I'll show you my big project being powered with Quasar :)

  • @doktordaxter
    @doktordaxter Год назад

    Thanks! Helped me understand the autocomplete and filtering :)

  • @osherezra131
    @osherezra131 Год назад

    Bro one of the best tutorials regarding quasar and its functionality thank you. one thing I would add to make it much better is to reference the docs while you explaining to us all the available props and methods quasar has to offer, so we can have a better understanding on how we can better explore quasar as a whole. cheers :) keep it up

  • @AbhishekMuddebihal
    @AbhishekMuddebihal 4 месяца назад

    Thank you brother! ❤

  • @mardarg3
    @mardarg3 Месяц назад

    Great video, thanks a lot!

  • @johnnydriesen7575
    @johnnydriesen7575 2 года назад +1

    Even on a Sunday, taking the time to create a stunning vid & willing to share his knowledge & experience.
    Thanks Luke.

    • @LukeDiebold
      @LukeDiebold  2 года назад +2

      A new video every 2 hours for the next 3 days 😉

  • @oswberta
    @oswberta Год назад

    Excellent... Really thank you from Argentina. I saw you on VUE Nation, it was very good, dynamic and enthusiastic like yours videos

  • @mohammad_zrar
    @mohammad_zrar 7 месяцев назад

    Thanks a lot,
    it's really helpful❤

  • @АндрейГалушко-е9о
    @АндрейГалушко-е9о 9 месяцев назад

    Thank you friend !!
    You're helping me study !!
    Nice day from Russia!!

    • @LukeDiebold
      @LukeDiebold  9 месяцев назад

      You're most welcome!!!

  • @TechInterpreter
    @TechInterpreter 2 года назад

    You saved the best for last! Thank you. Really great series of videos. I like your teaching style so much.

  • @Wi13dd
    @Wi13dd Год назад

    Thank you so much Luke!!!
    please, how to set one of the values ​​of an array of objects to display it in a q-selected on page load?

  • @ThomPorter74
    @ThomPorter74 2 года назад

    And just like that, I never had to ask Google how to spell Chihuahua again!

    • @LukeDiebold
      @LukeDiebold  2 года назад

      Hahaha! Chi, hua, hua.
      my brain won't let me do it any other way.

  • @hossamgamal7046
    @hossamgamal7046 2 года назад +3

    My greetings from Egypt 😍😍😍

    • @LukeDiebold
      @LukeDiebold  2 года назад +2

      Wow, hello!!!
      Greetings from Australia!

    • @hossamgamal7046
      @hossamgamal7046 2 года назад +1

      @@LukeDiebold 😍😍😍

  • @markmozza
    @markmozza Месяц назад

    Would love to know how to change the value color without CSS. Nothing in docs.

  • @1000ono
    @1000ono Год назад

    Thank you Luke. I started using Quasar a few days ago and your videos make it really easy. One quuestion is how to sort the object / array by name?

  • @hermansyam
    @hermansyam 2 года назад

    thanks

  • @laxmangiri5511
    @laxmangiri5511 2 года назад

    great love it

  • @nafaabout
    @nafaabout 2 месяца назад

    I just have one question :), How long did it take you to discover and learn all this information?
    I'm asking this because it's kind of depressing to find myself going through the docs for a long time but still be struggling to make some simple things to work, like auto completion and filtering.

    • @LukeDiebold
      @LukeDiebold  2 месяца назад +1

      @@nafaabout those things are not simple! And that's a good thing.
      You know I've thought about this a lot. It's true we never stop learning as devs, but there will be a time where you feel like you can achieve 99% of most projects with relative ease.
      There will be a day when you can manipulate data however you like, understand how to read and understand JavaScript docs in minutes rather than hours, run jobs and schedules on the backend, optimise queries, work with 3rd party APIs, understand SQL well enough to aanswer those slightly more complicated data questions...
      And it'll sneak up on you. Some day, sooner than you know it you'll think "huh. I can do just about all of it given enough time."
      Then you'll find gaps in the ecosystem and start finding unique ways to optimise how you build. And you'll love it! It will be challenging, but you'll thrive on it.
      The only people who don't get there, are the people who stop. So don't stop.
      Sooner than you know it, you'll be depressed because it takes you 20 minutes to do something that the 2024 version of yourself would never have dreamed possible.
      I promise, you're far more capable than you know. And that struggle you feel is not only normal, but desirable and necessary for massive growth. Lean into it, and enjoy the feeling of lying in bed at night, knowing you have something challenging to meet the next day.

    • @nafaabout
      @nafaabout 2 месяца назад

      @@LukeDiebold thank you so much for these supportive words. I appreciate it.

  • @chaimaaElfarji
    @chaimaaElfarji 3 месяца назад +1

    I am facing an issue with Q-select , I am using @input-value to filter from the backend , it's working well but when I select an option the typed search stays also so I have to delete it manually , i did clearable and it did't fix it , any ideas ? and thank u everyone

    • @LukeDiebold
      @LukeDiebold  3 месяца назад

      Hey there!
      Best way I can help, is if you create a reproduction on something like stackblitz (stackblitz.quasar.dev) and hit me up on discord!
      My discord is "quasarcast"
      Hope we can help!

  • @dylucksabin2752
    @dylucksabin2752 2 года назад

    Thanks Luke, you are a life saver!! Quick question, how would you tackle a filterable dropdown where the first option that will match is auto-selected even after they tab out of the field. It seems like tabbing out of the field cancels the filtering.

    • @dylucksabin2752
      @dylucksabin2752 2 года назад

      I figured it out - set an @blur event that did it, but if you have a better solution, please let me know!

    • @LukeDiebold
      @LukeDiebold  2 года назад

      Most welcome!
      @blur seems like and okay solution! This is one of those problems I'd have to dig deeper to find the "cleanest"

  •  Год назад

    Does anyone have an example of how to do a q-select with groups? like parent->children?

    • @LukeDiebold
      @LukeDiebold  Год назад

      Would need a little more context. Maybe two QSelects? One for the parent, one for the child?

  • @pabloerhard8983
    @pabloerhard8983 Год назад +1

    Can grouping be done inside q-select?

    • @LukeDiebold
      @LukeDiebold  Год назад

      Don't see why not!
      Maybe every item could be a group, and you could use the item slot to turn it into something like "QExpansionItem"
      Or... You could use a QMenu instead. Then you could literally just do whatever you want!

    • @pabloerhard8983
      @pabloerhard8983 Год назад +1

      @@LukeDiebold yeah but the q-menu doesnt allow filtering 👀, the way i solved it was by populating thee options array with disabled objects each time i wanted a division.

  • @indy7027
    @indy7027 2 года назад

    Thank you Luke for your videos! 🤗
    Could anyone please answer to a question in StackOverflow named "Placing a counter inside the select menu's placeholder"? Thanks!

    • @LukeDiebold
      @LukeDiebold  2 года назад

      No worries!
      I answered your question :)

    • @indy7027
      @indy7027 2 года назад

      @@LukeDiebold Thank you so much! GOD bless you !!!!

    • @indy7027
      @indy7027 2 года назад

      @@LukeDiebold Check your answer in SO. You meant "model: ref([])" instead of "model: ref(null)"
      You are a true Quasar+Vue concertist! 🎹🎼
      PS: I'm not the one who asked the question in SO.

  • @jagadishwarballa
    @jagadishwarballa 2 года назад

    Great video

  • @emdadgar_official
    @emdadgar_official 2 года назад +1

    can i use quasar and tailwind in a same project at different pages ?

    • @LukeDiebold
      @LukeDiebold  2 года назад

      Sure, I don't see why not!
      Might also want to checkout "unocss".

  • @xfgeshen
    @xfgeshen 2 года назад

    Great video! Is there a way to limit the number of items shown in the list with the rest being scrollable? What is the virtual-scroll property of qselect?

    • @LukeDiebold
      @LukeDiebold  2 года назад

      Thankyou!
      Do you mean, being able to load more from the server when you reach the bottom?

    • @xfgeshen
      @xfgeshen 2 года назад

      @@LukeDiebold I have a list of about 100 items. Currently, the list shown extends up to either the bottom of the page or up to the top of the page - showing about 20 at a time. I prefer to limit the number of displayed to 10 - and with the scrollbar user can view 10 at a time. Thanks.

    • @LukeDiebold
      @LukeDiebold  2 года назад

      I'm not at a computer, but try setting maxHeight on popup-content-style

  • @chiqui1234ok
    @chiqui1234ok Год назад +1

    40:30 Filtering/Searching in q-select 💖