Vue.js dynamic HTML and Vue directives in Sweet Alert 2
new Vue({
el: '#app',
data(){
results: []
}
});
I'm trying to show an alert with Sweet Alert, with input as search filter at the top, then I want to filter results
based on what was entered in the input in the alert.
The problem is that Vue directives don't seem to work in Sweet Alert - perhaps because they are not in scope #app
. Surprisingly to me, I haven't seen too many problems with this, so I think I am just doing something wrong.
Is there a way to have Vue directives, events, etc. in the Sweet Alert markup?
swal({
title: 'Something',
html: `
<button @click="test">Press Me</button>
`
});
thank
+3
source to share
1 answer
This in the case of a single variable notices its reverse side more than one qoute
const markup = `
<div class="person">
<h2>
${person.name}
</h2>
<p class="location">${person.location}</p>
<p class="bio">${person.bio}</p>
</div>
`;
this is for loops
const markup = `
<ul class="dogs">
${dogs.map(dog => `<li>${dog.name} is ${dog.age * 7}</li>`)}
</ul>
`;
0
source to share