Sweet Alert 2 中的 Vue.js 动态 HTML 和 Vue 指令答案

【问题标题】：Vue.js dynamic HTML and Vue directives in Sweet Alert 2Sweet Alert 2 中的 Vue.js 动态 HTML 和 Vue 指令
【发布时间】：2017-12-06 11:34:08
【问题描述】：

new Vue({

    el: '#app',

    data(){

        results: []        
    }   
});

我正在尝试使用 Sweet Alert 显示警报，在顶部输入作为搜索过滤器，然后我想根据在警报中输入的内容过滤 results。

问题是，Vue 指令似乎没有在 Sweet Alert 中生效——可能是因为它不在 #app 的范围内。令我惊讶的是，我没有看到太多这方面的问题，所以我认为我只是做错了什么。

有没有办法在 Sweet Alert 的标记中添加 Vue 指令、事件等？

swal({

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

谢谢

【问题讨论】：

您在这里找到解决方案了吗？

标签： javascript dynamic vue.js sweetalert sweetalert2

【解决方案1】：

如果是单个变量，请注意它是一个反引号而不是单个 qoute

const markup = `
 <div class="person">
    <h2>
        ${person.name}
    </h2>
    <p class="location">${person.location}</p>
    <p class="bio">${person.bio}</p>
 </div>
`;

这是for循环

const markup = `
<ul class="dogs">
    ${dogs.map(dog => `<li>${dog.name} is ${dog.age * 7}</li>`)}
</ul>
`;

参考：http://wesbos.com/template-strings-html/

【讨论】：