In my project using Vue and Laravel, I am trying to create a modal window with 2 tabs. The idea is to have two buttons, with each button linked to a specific tab that should open when clicked.
These buttons are located in the blade template:
<button @click="openModal('login')">
<button @click="openModal('register')">
//The Vue component is also included in the blade template
<auth-component :show="showModal" :active_tab="activeTab" @close="showModal = false"></auth-component>
/resources/assets/js/app.js:
My goal is to pass a parameter to a component's openModal() method...
const app = new Vue({
el: '#app',
data: {
showModal: false,
activeTab: '',
},
methods: {
openModal(tab) {
this.activeTab = tab;
this.showModal = true;
}
},
});
... and then use that parameter as a Vue prop to set a specific bootstrap-tab as active within the Vue component:
AuthComponent.vue:
<div class="modal-mask" @click="close" v-show="show">
<div class="modal-wrapper">
<div class="modal-container" @click.stop>
<b-card no-body>
<b-tabs card>
<b-tab title="Login" :active="active_tab === login">
<b-tab title="Register" :active="active_tab === register">
</b-tabs>
</b-card>
</div>
</div>
</div>
...
props: ['show', 'active_tab'],
However, the current code is not functioning as intended. There are no errors displayed in the console, but only the first tab (login) is shown as active after opening the modal.
UPDATE: I made changes to
<b-tab title="Login" :active="active_tab === login">
<b-tab title="Register" :active="active_tab === register">
Upon inspection in the Vue console, I can see that the required tab has an active: true property. However, even with this property set, the content of the Register tab remains hidden with a display: none style. It appears that simply setting active to true is not enough to make the tab content visible.