Vue.js dynamic HTML and Vue directives in Sweet Alert 2

Question

new Vue({

    el: '#app',

    data(){

        results: []        
    }   
});

I'm trying to show an alert with Sweet Alert, with an input as a search filter at the top, I then want to filter the results based on what's typed into the input in the alert.

The problem is, Vue directives don't seem to take effect in the Sweet Alert - probably because it's not within the scope of #app . Surprisingly for me, I haven't seen too many issues with this, so I think I'm just doing something wrong.

Is there a way of having Vue directives, events, etc. in the markup of a Sweet Alert?

swal({

    title: 'Something',
    html: `
            <button @click="test">Press Me</button>
          `
});

Thanks

Answer 1

This in case of single variable notice its a backtick not a single 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>
`;

reference: http://wesbos.com/template-strings-html/