Search code examples
javascriptvue.jssweetalert2

Vue.js Compnent doesnt show in Swal.fire html

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:

enter image description here

This is my Output:

enter image description here

This is the Browser HTML output:

enter image description here

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.
Solution

  • The Sweetalert popup is only rendering the HTML. It doesn't know anything about Vue components, so they are treated like HTML elements. You will have to initialize a Vue instance on the popup's HTML.

    You should be able to get a reference to the popup body with Swal.getHtmlContainer() so after the popup is shown try something like

    new Vue({
    el: Swal.getHtmlContainer()
})