[Vuejs]-How to assign id to quasar input validation error message?

1👍

You could add a slot for error messages to the q-input and add id to your own custom alert element

<div id="q-app" style="min-height: 100vh">
  <div class="q-pa-md" style="max-width: 300px">
    <q-input
      ref="inputRef"
      v-model="model"
      filled
      label="Type here"
      hint="Max 3 characters"
      bottom-slots
      :error="!isValid"
    >
      <template #error>
        <div id="error-alert">custom error message</div>
      </template>
    </q-input>
  </div>
</div>

enter image description here

codepen example

Alternatively, you could select the q-input by id and then xpath to the child alert element.

👤yoduh

Leave a comment