如何在SweetAlert2 html输出中使用v-for
如何在SweetAlert2 html输出中使用v-for
提问于 2018-10-11 00:29:11
我正在尝试使用vue-sweetalert2在警报中显示以下模板
<input v-model="name" class="swal2-input">
<select v-model="parent" name="parent" class="form-control">
<option v-for="category in categories" v-bind:value="category.id">
{{category.name}}
</option>
</select>我在普通模板中没有任何问题，但我不知道如何在SweetAlert2中使用它。
我试过这段代码：
this.$swal({
text: 'edit child',
html:
'<input v-model="name" class="swal2-input">' +
`<select v-model="parent" name="parent" class="form-control">
<option value="">nothing</option>
<option v-for="category in categories" v-bind:value="category.id">
{{category.name}}
</option>
</select>`,
showCancelButton: true,
confirmButtonText: 'edit',
cancelButtonText: 'cancel',
showCloseButton: true,
})但我什么也没看到。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-11 08:18:28
由于传递给SweetAlert2的超文本标记语言不是由Vue处理的，因此模板机制(包括v-for和v-model)将不可用，因此您必须使用JavaScript手动创建模板。具体地说，您需要替换：
html: `<input v-model="name" class="swal2-input">
<select v-model="parent" name="parent" class="form-control">
<option v-for="category in categories" v-bind:value="category.id">{{category.name}}</option> ...`通过以下方式：
html: `<input id="my-input" value="${this.name}" class="swal2-input">
<select id="my-select" value="${this.parent}" name="parent" class="form-control">
${this.categories.map(cat => `<option value="${cat.id}">${cat.name}</option>`)} ...`注意：<input>和<select>都被赋予了ID，这样我们就可以在警报的“预确认”时进行fetch the values：
const {value} = this.$swal({
preConfirm: () => [
document.getElementById("my-input").value,
document.getElementById("my-select").value
]
});
console.log(value[0]); // value of my-input
console.log(value[1]); // value of my-select页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52744878
复制相关文章
相似问题
腾讯云开发者
