VueJS：如何切换不同组件"collapse"？(如果 X 显示，则 Y 隐藏，反之亦然)

Question

我对VueJS很陌生，正试图将一个旧网站重新设计成VueJS 2。我的第一个问题是如何复制我在JQuery中所做的事情，其中通过：

如果组件X的'display'为true，则组件Y的'dispay'为false，反之亦然。

从本质上讲，如果我单击一个按钮来展开b-collapse"cccollapse"元素，那么我希望"szcollapse("元素折叠(如果它被展开(，反之亦然，所以在给定的时间点上，这些可折叠元素中只有一个被"扩展"。

我在vue项目中使用bootstrap vue，这就是当前模板的样子：

<template>
<div>
<b-container fluid class="button-row">
<fieldset>
<legend class="scheduler-border">
<span class="legend-label">YOU : MANAGE YOUR KEYS</span>
</legend>
<b-row class="menu-row">
<b-col>
<b-button variant="primary" size="lg" block class="text-left button-custom"><i style="padding-right:10px;padding-left:30%;" class="fas fa-plus-circle"></i>REQUEST A KEY</b-button>
</b-col>
</b-row>
<b-row class="menu-row">
<b-col>
<b-button v-b-toggle.szcollapse v-on:click="collapseCCCollapse" variant="primary" size="lg" block class="text-left button-custom"><i style="padding-right:10px;padding-left:30%;" class="fas fa-share-square"></i>ISSUE A KEY</b-button>
<b-collapse ref="szcollapse" id="szcollapse" class="mt-2">
<b-container class="container-sz-login">
<b-row class="cred-dropdown">
<b-col>
<b-input-group>
<span class="input-group-text" id="basic-addon1">
<i class="fas fa-user-circle fa-fw"></i>
</span>
<b-form-input id="txtUsername" />
</b-input-group>
</b-col>
</b-row>
<b-row class="cred-dropdown">
<b-col>
<b-input-group>
<span class="input-group-text" id="basic-addon1">
<i class="fas fa-lock fa-fw"></i>
</span>
<b-form-input type="password" id="txtPassword" />
</b-input-group>
</b-col>
</b-row>
<b-row class="cred-dropdown">
<b-col cols="2"/>
<b-col cols="8">
<b-button variant="primary" id="szlogin" size="lg" block >LOGIN<i style="padding-left:5px;" class="fas fa-sign-in-alt"></i></b-button>
</b-col>
<b-col cols="2"/>
</b-row>
</b-container>
</b-collapse>
</b-col>
</b-row>
<b-row class="menu-row">
<b-col>
<b-button v-b-toggle.cccollapse v-on:click="collapseSZCollapse" variant="primary" size="lg" block class="text-left button-custom"><i style="padding-right:10px;padding-left:30%;" class="fas fa-network-wired"></i>MANAGE YOUR KEYS</b-button>
<b-collapse ref="cccollapse" id="cccollapse" class="mt-2" v-model="showCollapse">
<b-container class="container-sz-login">
<b-row class="cred-dropdown">
<b-col>
<b-input-group>
<span class="input-group-text" id="basic-addon1">
<i class="fas fa-user-circle fa-fw"></i>
</span>
<b-form-input  id="txtCorpId"/>
</b-input-group>
</b-col>
</b-row>
<b-row class="cred-dropdown">
<b-col>
<b-input-group>
<span class="input-group-text" id="basic-addon1">
<i class="fas fa-lock fa-fw"></i>
</span>
<b-form-input type="password" id="txtCorpPwd"/>
</b-input-group>
</b-col>
</b-row>
<b-row class="cred-dropdown">
<b-col cols="2"/>
<b-col cols="8">
<b-button variant="primary" id="ccLogin" size="lg" block >LOGIN<i style="padding-left:5px;" class="fas fa-sign-in-alt"></i></b-button>
</b-col>
<b-col cols="2"/>
</b-row>
</b-container>
</b-collapse>
</b-col>
</b-row>
</fieldset>
</b-container>
</div>
</template>

这是脚本：

<script>
export default {
name: "Menu",
props: {
msg: String
},
methods: {
collapseSZCollapse : function() {
console.log('this.$refs.szcollapse : ' + this.$refs.szcollapse.collapsed);
},
collapseCCCollapse : function() {
console.log('this.$refs.cccollapse : ' + this.$refs.cccollapse.collapsed)
}
},
data() {
return {
showCollapse: false
};
}
};
</script>

显然，脚本并没有真正在方法中做任何事情——我只是想看看如何获取当前元素的值，以便在调用v-on:click时做出决定。

VueJS的正确方法是什么？我知道(有点(vuejs是数据驱动的，但我不确定如何从一个元素获取数据来驱动另一个元素的状态。

Answer 1

叹气。如果我真的调查得当。。。

https://bootstrap-vue.js.org/docs/components/collapse/#accordion-支持

这正是我想要的。

仍然很高兴听到其他程序化的答案(如果有的话(？

Answer 2

您可以为b-collapse元素提供v-model绑定。下面是一个jsfiddle示例。

new Vue({
el: "#app",
data: {
firstCollapsed: true,
secondCollapsed: false
},
methods: {
alternateCollapse() {
if (this.firstCollapsed) {
	this.firstCollapsed = false;
this.secondCollapsed = true;
} else {
	this.firstCollapsed = true;
this.secondCollapsed = false;
}
}
}
});

<div id="app">
<b-collapse v-model="firstCollapsed" id="collapse1">
<div>Inner Element 1</div>
</b-collapse>
<b-collapse v-model="secondCollapsed" id="collapse2">
<div>Inner Element 2</div>
</b-collapse>
<b-btn @click="alternateCollapse()">Alternate Collapse</b-btn>
</div>
<style scoped>
.collapse {
margin: 5px;
padding: 5px;
background-color: lightgray;
}
#collapse1 {
border: 1px solid red;
}

#collapse2 {
border: 1px solid blue;
}
</style>