%Schriftgröße, Layout, Papierformat, Art des Dokumentes
\documentclass[10pt,oneside,a4paper]{scrartcl}

%Einstellungen der Seitenränder
\usepackage[left=2cm,right=2cm,top=1.5cm,bottom=1.5cm,includeheadfoot]{geometry}

%neue Rechtschreibung
\usepackage[ngerman]{babel}

%Umlaute ermöglichen
\usepackage[utf8]{inputenc}

%Gesamtseitenzahl
\usepackage{lastpage}

% Kopf- und Fußzeile
\usepackage[automark]{scrpage2}

%Quellcode-Listings
\usepackage{listings}

%Hyperlinks
\usepackage{hyperref}

% Mehrere Spalten
\usepackage{multicol}



%Kopfzeile
\ihead{JavaScript}
\chead{}
\ohead{https://kohnlehome.de/html/vue-bootstrap-modal.pdf}
\setheadsepline{0.5pt}

%Fußzeile
\setfootsepline{0.5pt}
\ifoot{Franz Kohnle}
\cfoot{Seite \thepage\ von  \pageref{LastPage}}
\ofoot{\today}

\pagestyle{scrheadings}

\begin{document}

% Überschrift 
\begin{center}
  \LARGE % Schriftgröße
  \bfseries % Fettdruck
  \sffamily % Serifenlose Schrift
  Bootstrap 5 - Modal mit Vue 3
\end{center}


\section*{HTML}
\begin{verbatim}
<!-- Button trigger modal -->
<button @click="buttonMyModalAnzeigenClick">myModal anzeigen</button>

<!-- Modal -->
<div ref="myModalId" class="modal fade" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">Modal Titel</h5>
                <button class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <input v-model="myModalText">
            </div>

            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                <button @click="buttonSpeichernClick" class="btn btn-primary">Speichern</button>
            </div>

        </div>
    </div>
</div>
\end{verbatim}

\section*{JavaScript}
\begin{verbatim}
data(){
    return {            
        myModal: null,
        myModalText: ''
    }
},

methods: {
    buttonMyModalAnzeigenClick(){
        this.myModalText = 'Hallo';
        this.myModal.show();
    },

    buttonSpeichernClick(){
        console.log(this.myModalText);
        this.myModal.hide();
    }    
},

mounted(){
    this.myModal = new bootstrap.Modal(this.$refs.myModalId);
}
\end{verbatim}

\end{document}
