Select placeholder with no use-input?



  • Did anyone have success creating a placeholder for a Select component with no use-input property?

    I want it do simply display e.g. “Choose an option” when nothing is selected in a read-only (i.e. non-editable) Select, and for several reasons I also cannot use the component label for this.

    Thanks in advance for any tips.



  • You can use the selected slot for this:

         <q-select
            filled
            v-model="model"
            :options="options"
            stack-label
            label="Standard"
          >
            <template v-slot:selected>
               <template v-if="model">
                 {{ model.label }}
              </template>
              <template v-else>
                 Choose an option
              </template>
            </template>
          </q-select>
    


  • Great, thanks for the solution! Select is one of the most complex Quasar components, so it’s an easy miss. It deserves at least an example in the docs IMO. Thanks again.



  • @rubs It’s actually in the docs, but as a more complicated example. I just simplified it a bit to make it more clear. https://quasar.dev/vue-components/select#Example--Selected-item-slot



  • Good! I really meant in the API section / selected slot, but improvements to the docs are always welcome. Now I see that I also completely missed the selected-item slot… This is a truly flexible component, I’m always learning something new about it. Thanks again!


Log in to reply