Как в Vue JS записать компонент в строку?

Question

[Александр Урих]

Здравствуйте. Есть плагин vue-sweetalert2. В нем есть свойство footer, которое принимает текст или html. Мне нужно туда поместить ссылку и обрабатывать клик по ней

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>',
});

Но эта ссылка так и формируется с аттрибутом @click и, соответственно, click не отрабатывается
Как сделать так, чтобы можно было правильно обрабатывать клик?

Answer 1

[fan_cpp]

Чтобы по клику на ссылку у вас вызывался метод VUE, Вам нужно чтобы ссылка с вызовом метода была отрендерена через vuejs, для этого поместите её в шаблон.

<a href="#" id="#my-link" @click="myMethod">test</a>

и по умолчанию она должна быть скрыта
#my-link {
display: none;
}

А при инициализации компонента swal в свойство footer можно передать
....

footer: '<a href="#" onclick="document.getElementById('my-link').click()">sfg dfsg dfg dfg</a>',

....

В итоге у вас в футер окна будет вставляться ссылка по нажатию на которую она будет имитировать клик на ссылку которая может запустить VUE метод.

Костыльное решение, но оно будет работать.

Comments

[Александр Урих]

Костыльно) Спасибо!