How to make error message clickable in vuetify?

Question

Vue.js

Kind time of the day, please tell me whether it is possible to make it so that when you click on the error message, some method will work. There is a form, when incorrect data is entered, validation is performed (the message "The entered data is not correct" appears), you can make this message clickable so that when you click, you can run some method.

Answer 1

The API of the component v-text-fielddoes not provide such an opportunity, so you have to hack it.
We hang a native click handler on the component instance, inside we check where the event came from:
<v-text-field @click.native="onClick">

methods: {
  onClick({ target: t }) {
    if (
      t.classList.contains('v-messages__message') &&
      t.closest('.v-messages.error--text')
    ) {
      // ну да, кликнули по сообщению об ошибке
    }
  },
},

https://jsfiddle.net/92xcLg0y/

Answer 2

If you are not using any frameworks (visually), then I think yes.
You should have some div (span or something like that) where the error is placed. The @click handler is hung on this div (I don’t remember exactly how in VueJS) and the required method is called.