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

Question

我是 VueJS 的新手，正在尝试将旧站点重新设计为 VueJS 2。我的第一个问题是如何复制我在 JQuery 中所做的事情，其中：

如果分量 X 'display' 为真，则分量 Y 'display' 为假，反之亦然。

本质上，如果我单击一个按钮展开 b-collapse "cccollapse" 元素，那么我希望 "szcollapse" 元素折叠（如果展开），反之亦然，所以只有一个在给定的时间点，这些可折叠元素的数量是 "extended"。

我在我的 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-support

这正是我想要的。

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

Answer 2

您可以为 b-collapse 元素提供 v-model 绑定。这是 a 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>

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

VueJS: how to toggle "collapse" of different components? (if X is show then Y is hide, vice versa)

vuejs2

bootstrap-vue

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

VueJS: how to toggle "collapse" of different components? (if X is show then Y is hide, vice versa)

vuejs2

bootstrap-vue

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