首先,我是 Vue 和前端的新手。
我有一个按钮可以在我的...中显示甜蜜警报
<button class="btn btn-sm btn-fill btn-wd" @click="showSwal('input-field')">Yeni</button>
并有这个方法;
showSwal(type) {
if (type === 'input-field') {
swal({
title: 'Input something',
html: '<div class="form-group">' +
'<input id="input-field" type="text" class="form-control" />' +
'</div>',
showCancelButton: true,
confirmButtonClass: 'btn btn-success btn-fill',
cancelButtonClass: 'btn btn-danger btn-fill',
buttonsStyling: false
}).then(function (result) {
swal({
type: 'success',
html: 'You entered',
confirmButtonClass: 'btn btn-success btn-fill',
buttonsStyling: false
})
}).catch(swal.noop)
}
}
我不想把 html 数据放在这个范围内,而是想把我的另一个模板组件 NewMerchant.vue 放在
我试过了
html: '<new-merchant></new-merchant>'
但它不渲染它。
而且我不知道这是否可以做到。据我所见,其他框架如 inspina mvc 可以实现这一点。
我正在使用 Vue Paper Dashboard Pro AdminTemplate
最佳答案
对于仍在寻找的任何人,您都可以使用
onOpen: () => {
new Vue({
el: ".swal2-content"
});
},
像这样
swal({
title: 'Input something',
html: '<new-merchant></new-merchant>',
showCancelButton: true,
confirmButtonClass: 'btn btn-success btn-fill',
cancelButtonClass: 'btn btn-danger btn-fill',
buttonsStyling: false
onOpen: () => {
new Vue({
el: ".swal2-content"
});
},
}).then(function (result) {
swal({
type: 'success',
html: 'You entered',
confirmButtonClass: 'btn btn-success btn-fill',
buttonsStyling: false
})
}).catch(swal.noop)
关于javascript - Vue.js,如何从组件中填充 SweetAlert2 html 表单数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47669275/