How to write a component to a string in Vue JS?

Question

Vue.js

Hello. There is a vue-sweetalert2 plugin. It has a footer property that accepts text or html. I need to place a link there and handle a click on it.

this.$swal({
  title: 'Заголовок',
  text: 'Текст',
  type: 'info',
  showCancelButton: true,
  buttonsStyling: false,
  cancelButtonClass: 'btn btn-outline-info',
  confirmButtonClass: 'm-r-5 btn btn-info',
  cancelButtonText: 'Закрыть',
  confirmButtonText: 'Сохранить',
  footer: '<a href="#" @click="myMethod">sfg dfsg dfg dfg</a>',
});

But this link is still formed with the @click attribute and, accordingly, the click is not processed
. How to make it possible to process the click correctly?

Answer 1

In order for you to call the VUE method when you click on the link, you need the link with the method call to be rendered through vuejs, for this place it in the template.
and it should be hidden by default
#my-link {
display: none;
}
And when initializing the swal component, you can pass
... to the footer property.
....
As a result, a clickable link will be inserted into the window footer, which will simulate a click on the link that can launch the VUE method.
Crutch solution, but it will work.