This is my Swal.Fire in file1.js:
import TextModuleComponent from "../components/TextModuleComponent";
export default {
components: {TextModuleComponent}
}
Swal.fire({
title: 'Das Angebot per E-Mail versenden?',
html:
'<input class="swal2-input" placeholder="Empfänger E-Mail Adresse..." id="email" type="email" ></span>' +
'<input class="swal2-input" id="header" placeholder="Betreff..." type="text"></span>' +
'<div><TextModuleComponent ></TextModuleComponent><textarea class="swal2-textarea"></textarea></div>',
showConfirmButton: true,
showDenyButton: true,
confirmButtonText: 'Senden',
denyButtonText: 'Nein',
confirmButtonColor: '#2E8B57',
icon: 'question',
focusConfirm: false,
preConfirm: () => ({
email: $('#email').val(),
header: $('#header').val()
}),
This is My TextModule Component:
This is my Output:
This is the Browser HTML output:
There you can see, that the Textmodule Component is interpreted, but it doesnt show.
But i dont know why my Sweetalert popup doesnt show "test". If i set "test" directly in swal html it works.
EDIT
i tried:
new Vue({
beforeCreate: () => {
Swal.fire({
title: 'Das Angebot per E-Mail versenden?',
html:
'<input class="swal2-input" placeholder="Empfänger E-Mail Adresse..." id="email" type="email" ></span>' +
'<input class="swal2-input" id="header" placeholder="Betreff..." type="text"></span>' +
'<div><text-module-component></text-module-component><textarea rows="10" id="content" placeholder="E-Mail Inhalt..." class="swal2-textarea"></textarea></div>' +
'<div style="text-align:left"><i class="material-icons">description</i><label style="font-weight:bold;font-size:140%" class="label-on-left">Anhang</label></div>' +
'<div style="text-align:left"><label style="font-size:110%" class="label-on-left">1 offer#' + object_id + '</label></div>' +
'<input class="swal2-file" multiple type="file" id=files>',
})
}
})
app.js :
Vue.component('text-module-component', require('/resources/js/components/TextModuleComponent.vue').default);
Error:
unknown custom element: <textmodulecomponent> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
from Vue.js Compnent doesnt show in Swal.fire html
No comments:
Post a Comment