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:

            <template v-slot:selected>
               <template v-if="model">
                 {{ model.label }}
              <template v-else>
                 Choose an option

  • 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.

  • 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