将属性参数传递给 Vue 组件答案

【问题标题】：Pass a property parameter to the Vue component将属性参数传递给 Vue 组件
【发布时间】：2018-08-03 22:38:43
【问题描述】：

我正在使用 Vue+Laravel，我想制作一个带有 2 个选项卡的模式窗口。我有两个按钮，每个按钮都必须打开某个连接的选项卡。
按钮是blade模板中的地方：

<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:
我想将openModal() 参数传递给组件...

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

... 并使用该参数作为 Vue prop 将某些 bootstrap-tab 设置为在 Vue 组件中处于活动状态：

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'],

但是我当前的代码不起作用。没有控制台错误。打开模式后，只有第一个选项卡（登录）始终处于活动状态。

更新：我搬到了

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

我看到在 Vue 控制台中需要选项卡获取 active: true 属性。但是active: true 注册选项卡无论如何都是display: none。所以我猜想将active 属性设置为true 不足以让标签内容真正可见。

JSFiddle component code

【问题讨论】：

如果我的active_tab 属性在单击按钮后有需要的值，如果有任何方法可以调试，请告诉我。我使用console.log() 在app.js 中检查activeTab 并没问题。
active_tab 将是一个字符串，所以它应该是:active="active_tab === 'login'"
@Matt 我试过了。我签入了需要选项卡获取active 参数的Vue devtools。但它的类不会更改为active show
另外一种快速调试 props 的方法是从计算中注销。例如computed: { activeTabDebug() { console.log(this.active_tab); } }

标签： javascript laravel vue.js

【解决方案1】：

您可以尝试将它们包装在 <b-tabs v-model="tabIndex"></b-tabs> 中，然后使用计算方法来确定基于 prop 的索引。

编辑

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

【讨论】：

我检查了 Vue devtools 并注意到 active 属性设置正确。但是在我看来，设置active 属性不足以使选项卡处于活动状态（最后一个意思是向用户显示选项卡内容时处于活动状态）。我希望我解释得很好......
@DoIGetAnything 你是否将它们包装在中？你能用更多的包装代码更新这个例子吗？
我添加了JSFiddle。是的，我正在<b-tabs>
@DoIGetAnything 在 vue bootstrap 库中看起来像标签组件处理设置点击时的活动标签。因此，使用计算来设置 tabIndex 的方法可能最适合处理编程选项卡切换。
我做了computed: { tabIndex: { get() { if (this.active_tab === 'login') { return 0; } else { return 1; } }, set() { return; } } }, 并且没有错误。我想在set() 中留下return 是可以的...

【解决方案2】：

尝试传递openModal.bind(undefined,'login')，这样您就可以返回一个带有绑定参数的函数，而不是调用该函数。

此外，选项卡组件是使用 v-model 属性设置的。它使用数字索引来设置活动选项卡。

也许做一个查找对象来简化事情： const tab_map = { login: 0, register: 1 }

然后你可以设置openModal.bind(undefined, tab_map.login)

对于选项卡上的 v-model 设置，请查看此示例：https://bootstrap-vue.js.org/docs/components/tabs/#external-controls

【讨论】：