append slot on a specific q-input appears on other q-input components

  • In my application I use the append slot on q-input in combination with a q-date component as recommended in the Quasar documentation.

    <q-input readonly type="text" v-model="nextDate" :label="nextDateLabel" :disable="submit" @input="$v.nextDate.$touch" bottom-slots :error="$v.nextDate.$error" error-message="Enter a valid date">
                <template v-slot:append>
                  <q-icon name="event" class="cursor-pointer">
                    <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
                      <q-date v-model="nextDate" :options="dateOptions" mask="M/D/YYYY" color="grey-8" @input="() => $refs.qDateProxy.hide()" />

    In the same component I also use another q-input without the append slot, but occasionally the append slot containing q-date appears on it. I have to explicitly define an empty append slot to get around this behavior.

    <q-input v-model="dollarValue" type="text" :label="alertValueFloatLabel" :disable="submit" @input="$v.dollarValue.$touch" bottom-slots :error="$v.dollarValue.$error" :error-message="alertValueErrorLabel">
                <template v-slot:append />

    Is this a bug in Quasar or my approach?

  • Can you make a codepen showing what you are seeing?


Log in to reply