q-select with different icons from options



  • Hello
    in want to have in q-select choice the icon which is listed in the selection itself. As depicted here:
    languages.png

    At the moment I have this:

    <template v-slot:append>
         <q-icon
              name="outlined_flag"
              class="text-white"
           />
     </template>
     <template v-slot:option="scope">
          <q-item
                  v-bind="scope.itemProps"
                  v-on="scope.itemEvents"
           >
              <q-item-section>
                    <q-item-label v-html="scope.opt.label" />
              </q-item-section>
              <q-item-section side>
                    <img :src="scope.opt.icon" />
                </q-item-section>
          </q-item>
    </template>
    

    How may I change the static outline_flag with the proper icon the user had choosed?
    Appreciating any hints.
    BR





  • Thx, do you mean something like this:

              <template v-slot:selected-item="scope">
                {{scope.opt.label}}
                <!-- <q-icon :name="scope.opt.icon" />  -->
                <img :src="scope.opt.icon" /> 
                <!-- <q-avatar :icon="scope.opt.icon" /> -->
    
              </template>
    

    instead of v-slot:append ?
    (only the img tag works. The other ones in rem. doesn’t hit)

    The issue now is, that flag is tacked right beside the language text.
    How get it right-aligned? (as the outline_flag above)

    Furtheron appreciating any hints.

    Edit: something like this, did the remedy:

    <img
       :src="scope.opt.icon"
        class="q-pl-lg"
    />
    

    Unfortunately will take quite a long time, until all these quasar shortcuts will flow…



  • @donsherman

    Here’s a start:
    https://codepen.io/ontwikkelfabriek/pen/ZEWPLXw

    I have a a hint for you:
    Read the entire quasar doc at least once globally. So you have an idea what’s possible and where to find it. Take a good look at all the component and examples , for example the awnser is right there:( i just switched the icons from left to right)

    https://quasar.dev/vue-components/select#Example--Options-slot


Log in to reply