如何在SweetAlert2中使用v-for
提问于 2020-02-01 12:27:19
this.$swal
.fire({
title: '학교를 검색해주세요.',
input: 'text',
inputAttributes: {
autocapitalize: 'off'
},
showCancelButton: true,
confirmButtonText: '검색하기',
cancelButtonText: '취소',
icon: 'question',
preConfirm: (school) => {
return axios.get(`(serverIp)/school?query=${school}`)
.then(response => {
console.log(response.data.data.schools)
this.$swal.fire({
title:'학교를선택해주세요.',
html: `<div v-for="(item, index) in response.data.data.schools" :key="index">
{{ item.school_name }}
</div>`
})
})
},
allowOutsideClick: () => !this.$swal.isLoading()
})我试过这段代码，但它在html中是这样的。
{{ item.school_name }}我该怎么做？
我还没有用过“甜蜜警示2”，如果我不能，我希望你能理解。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-02-02 07:10:29
vue-sweetalert2不支持动态呈现HTML模板，因此您不能以这种方式传递Vue模板；但在这种情况下，您实际上并不需要这样做。相反，您可以在JavaScript中生成HTML，如下所示：
axios
.get(apiUrl)
.then(response => {
this.$swal.fire({
html: response.data.data.schools
.map(item => `<div>${item.school_name}</div>`)
.join('')
})
})上面的代码在response.data.data.schools中的数组上使用Array.prototype.map将数组值映射到一个div数组中，然后使用Array.prototype.join将结果数组值组合成一个长的HTML。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60016874
复制相关文章
点击加载更多
腾讯云开发者
