title: VueJS: how to toggle "collapse" of different components? (if X is show then Y is hide, vice versa)
body: <p>I'm very new to VueJS and trying to re-engineer an old site into VueJS 2.
  My first issue is how to replicate what I did in JQuery, where by:</p>
  
  <p>if component X 'display' is true, then component Y 'display' is false, and vice versa.</p>
  
  <p>Essentially, if I click a button to expand the b-collapse "cccollapse" element, then I want the "szcollapse" element to collapse (if it is expanded) and vice versa, so only one of those collapsible elements is "extended" at a given point in time.</p>
  
  <p>I'm using bootstrap-vue in my Vue project and this is what the current template looks like this:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;b-container fluid class="button-row"&gt;
      &lt;fieldset&gt;
        &lt;legend class="scheduler-border"&gt;
          &lt;span class="legend-label"&gt;YOU : MANAGE YOUR KEYS&lt;/span&gt;
          &lt;/legend&gt;
          &lt;b-row class="menu-row"&gt;
              &lt;b-col&gt;
                  &lt;b-button variant="primary" size="lg" block class="text-left button-custom"&gt;&lt;i style="padding-right:10px;padding-left:30%;" class="fas fa-plus-circle"&gt;&lt;/i&gt;REQUEST A KEY&lt;/b-button&gt;
              &lt;/b-col&gt;
          &lt;/b-row&gt;
          &lt;b-row class="menu-row"&gt;
              &lt;b-col&gt;
                  &lt;b-button v-b-toggle.szcollapse v-on:click="collapseCCCollapse" variant="primary" size="lg" block class="text-left button-custom"&gt;&lt;i style="padding-right:10px;padding-left:30%;" class="fas fa-share-square"&gt;&lt;/i&gt;ISSUE A KEY&lt;/b-button&gt;
                  &lt;b-collapse ref="szcollapse" id="szcollapse" class="mt-2"&gt;
                    &lt;b-container class="container-sz-login"&gt;
                      &lt;b-row class="cred-dropdown"&gt;
                        &lt;b-col&gt;
                          &lt;b-input-group&gt;
                            &lt;span class="input-group-text" id="basic-addon1"&gt;
                                &lt;i class="fas fa-user-circle fa-fw"&gt;&lt;/i&gt;
                            &lt;/span&gt;
                            &lt;b-form-input id="txtUsername" /&gt;
                          &lt;/b-input-group&gt;
                        &lt;/b-col&gt;
                      &lt;/b-row&gt;
                      &lt;b-row class="cred-dropdown"&gt;
                        &lt;b-col&gt;
                          &lt;b-input-group&gt;
                            &lt;span class="input-group-text" id="basic-addon1"&gt;
                                &lt;i class="fas fa-lock fa-fw"&gt;&lt;/i&gt;
                            &lt;/span&gt;
                            &lt;b-form-input type="password" id="txtPassword" /&gt;
                          &lt;/b-input-group&gt;
                        &lt;/b-col&gt;
                      &lt;/b-row&gt;
                      &lt;b-row class="cred-dropdown"&gt;
                        &lt;b-col cols="2"/&gt;
                        &lt;b-col cols="8"&gt;
                          &lt;b-button variant="primary" id="szlogin" size="lg" block &gt;LOGIN&lt;i style="padding-left:5px;" class="fas fa-sign-in-alt"&gt;&lt;/i&gt;&lt;/b-button&gt;
                        &lt;/b-col&gt;
                        &lt;b-col cols="2"/&gt;
                      &lt;/b-row&gt;
                    &lt;/b-container&gt;
                  &lt;/b-collapse&gt;
              &lt;/b-col&gt;
          &lt;/b-row&gt;
          &lt;b-row class="menu-row"&gt;
              &lt;b-col&gt;
                  &lt;b-button v-b-toggle.cccollapse v-on:click="collapseSZCollapse" variant="primary" size="lg" block class="text-left button-custom"&gt;&lt;i style="padding-right:10px;padding-left:30%;" class="fas fa-network-wired"&gt;&lt;/i&gt;MANAGE YOUR KEYS&lt;/b-button&gt;
                  &lt;b-collapse ref="cccollapse" id="cccollapse" class="mt-2" v-model="showCollapse"&gt;
                    &lt;b-container class="container-sz-login"&gt;
                      &lt;b-row class="cred-dropdown"&gt;
                        &lt;b-col&gt;
                          &lt;b-input-group&gt;
                            &lt;span class="input-group-text" id="basic-addon1"&gt;
                                &lt;i class="fas fa-user-circle fa-fw"&gt;&lt;/i&gt;
                            &lt;/span&gt;
                            &lt;b-form-input  id="txtCorpId"/&gt;
                          &lt;/b-input-group&gt;
                        &lt;/b-col&gt;
                      &lt;/b-row&gt;
                      &lt;b-row class="cred-dropdown"&gt;
                        &lt;b-col&gt;
                          &lt;b-input-group&gt;
                            &lt;span class="input-group-text" id="basic-addon1"&gt;
                                &lt;i class="fas fa-lock fa-fw"&gt;&lt;/i&gt;
                            &lt;/span&gt;
                            &lt;b-form-input type="password" id="txtCorpPwd"/&gt;
                          &lt;/b-input-group&gt;
                        &lt;/b-col&gt;
                      &lt;/b-row&gt;
                      &lt;b-row class="cred-dropdown"&gt;
                        &lt;b-col cols="2"/&gt;
                        &lt;b-col cols="8"&gt;
                          &lt;b-button variant="primary" id="ccLogin" size="lg" block &gt;LOGIN&lt;i style="padding-left:5px;" class="fas fa-sign-in-alt"&gt;&lt;/i&gt;&lt;/b-button&gt;
                        &lt;/b-col&gt;
                        &lt;b-col cols="2"/&gt;
                      &lt;/b-row&gt;
                    &lt;/b-container&gt;
                  &lt;/b-collapse&gt;
              &lt;/b-col&gt;
          &lt;/b-row&gt;
      &lt;/fieldset&gt;
      &lt;/b-container&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>And this is the script:</p>
  
  <pre><code>&lt;script&gt;
  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
      };
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>Obviously the script isnt really doing anything in the methods -- i'm just trying to see how to get the value of the current element to make a decision when v-on:click is called.</p>
  
  <p>What is the correct VueJS way of doing this? I understand (sort of) that vuejs is data driven, but I'm not sure <em>how</em> to get the data from one element to drive the state of the other.</p>