将属性参数传递给Vue组件

Question

I'm using Vue+Laravel, I want to make a modal window with 2 tabs. I have two buttons, each button must open certain connected tab.
Buttons are places in blade template:

<button @click="openModal('login')">
<button @click="openModal('register')">

//Vue component also is placed in blade template
<auth-component :show="showModal" :active_tab="activeTab" @close="showModal = false"></auth-component>

/resources/assets/js/app.js :
I want to pass openModal() parameter to a component...

const app = new Vue({
    el: '#app',
    data: {
        showModal: false,
        activeTab: '',
    },
    methods: {
        openModal(tab) {
            this.activeTab = tab;
            this.showModal = true;
        }
    },
});

... and use that parameter as Vue prop to set certain bootstrap-tab as active inside 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'],

But my current code does not work. There are no console errors. Just first tab (login) is always active after modal is opened.

---

UPDATE : I moved to

<b-tab title="Login" :active="active_tab === login">
<b-tab title="Register" :active="active_tab === register">

and I see that in Vue console needed tab get active: true property. But while active: true Register tab is anyway display: none . So I guess setting active property as true isn't enough to actually make tab content visible.

JSFiddle component code

Answer 1

You could try wrapping them in <b-tabs v-model="tabIndex"></b-tabs> and then have a computed method that determines the index based off the prop.

EDIT

computed: {
  tabIndex: {
    get: function() {
      if (this.activeTab === 'register') {
        return 1;
      } else {
        return 0;
      }
    },
    set: function(newValue) {
      return newValue;
    }
  }
}

Answer 2

Try passing openModal.bind(undefined,'login') so you return a function with the bound params instead of invoking that function.

Also, the tabs component is set with the v-model attribute. It uses numeric indexes to set the active tab.

Maybe make a lookup object to simplify things: const tab_map = { login: 0, register: 1 }

Then you can setup openModal.bind(undefined, tab_map.login)

For the v-model setup on tabs, check this example out: https://bootstrap-vue.js.org/docs/components/tabs/#external-controls