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="isModalActive = true">
        	Login
    	</button>

		<!--<login-panel v-if="showLoginModal" @clicked="closeModal" ></login-panel>-->

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

			};
    },
    methods: {
		checkAuthentication (value) {
			this.showLoginModal = value;
			this.isAuthentified = !this.isAuthentified;
        },
    },
};


/*
$('#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)
})
*/