om/public/routes/profil.js

const ProfilRouter = {
    template: `
<div>
	<div v-if="isAuthentified">
		<ProfilCard
			v-for="(profil, index) in profilcard"
			:key="profil.id"
			:profil="profil"
		></ProfilCard>
		<b-button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="logOut()">Logout</b-button>
	</div>

	<div v-else-if="!isAuthentified">
		<button class="button is-primary is-medium"
            @click="showLoginModal = true">
            Login
        </button>

		<b-modal :active.sync="showLoginModal" has-modal-card>
			<login-panel></login-panel>
		</b-modal>
	</div>
</div>`,
    data: function () {
        return {
			showLoginModal: false,
			isAuthentified: false,
			profilcard: _profilcard,
		};
    },
};


/*
$('#myModal').on('show.bs.modal', function (event) {
  console.log("Modal Opened")
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})
*/